Skip to main content

Bug Tracker

Side navigation

#8278 closed bug (invalid)

Opened February 15, 2011 09:55AM UTC

Closed February 15, 2011 01:34PM UTC

Last modified March 14, 2012 12:24PM UTC

Re: FireFox 3.6.13 Selecting Form Checkboxes checked items

Reported by: s.hamed.afghan@gmail.com Owned by:
Priority: low Milestone: 1.next
Component: css Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
Description

I repeat again it didn't work on firefox 3.6.13

My Jquery version is 1.5

My Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Form Selectors and Filters</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $('form :checked').css("border", "3px solid red");
    });
</script>
    <style type="text/css">
        .style1
        {
            width: 600px;
        }
        .style2
        {
            width: 200px;
        }
    </style>
</head>
<body>

    <h1>
        Example Form Document</h1>
<form action="" method="post">

<table class="style1">
<tbody>
    <tr>
        <td class="style2">
            First Name</td>
        <td>
            <input id="FirstName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Last Name</td>
        <td>
            <input id="LastName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Disabled Element</td>
        <td>
            <input id="Text1" type="text" disabled="disabled"/></td>
    </tr>
    <tr>
        <td class="style2">
            Gender</td>
        <td>
            <input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td>
    </tr>
    <tr>
        <td class="style2">
            What products are you interested in?</td>
        <td>
            <input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Widgets</label><br />
            <input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Hibbity Jibbities</label><br />
            <input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">SplashBangers</label><br />
            <input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Whatzits</label></td>
    </tr>
    <tr>
        <td class="style2">
            Comments:</td>
        <td>
            <textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td>
    </tr>
    <tr>
        <td class="style2">
            Optional life story file</td>
        <td>
            <input id="File1" type="file" /></td>
    </tr>
    <tr>
        <td class="style2"> 
            </td>
        <td> 
            </td>
    </tr>
    <tr>
        <td class="style2"> 
            </td>
        <td>
            <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" 
                type="reset" value="reset" /></td>
    </tr>
</tbody></table>

</form>
</body>
</html>
Attachments (0)
Change History (2)

Changed February 15, 2011 01:34PM UTC by jitter comment:1

_comment0: Thanks for taking the time to contribute to the jQuery project by writing a bug report. \ \ You could have commented on your original bug report that it was closed incorrectly because addyosmani missed the space between `form` and `:checked` instead of opening a new ticket and posting a code blob. \ \ After checking your old and new ticket and the code sample I conclude that this isn't a bug in jQuery. You can easily verify that by looking at this [http://jsfiddle.net/jitter/adMQe/ test case]. It shows that the selector works and that `.css` does indeed apply the style, the problem is you don't see it because some browser refuse to actually display the stylings on inputs. \ \ It's a well known problem that the styling of input tags with CSS is difficult because of the very different way browsers handle this. Just google for terms like css, styling, input, radiobutton, checkbox, ... and you will find lots of content. For a starter you can check http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css . Then you might want to look for a readymade solution (e.g. some jQuery plugin) which handles all this crossbrowser quirks for you. \ \ Dupe of #82761297776925581277
component: unfiledcss
description: I repeat again it didn't work on firefox 3.6.13 \ My Jquery version is 1.5 \ \ '''My Example:''' \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \ \ <html xmlns="http://www.w3.org/1999/xhtml"> \ <head> \ <title>Using Form Selectors and Filters</title> \ <script type="text/javascript" src="../jquery.js"></script> \ <script type="text/javascript"> \ $("document").ready(function() { \ $('form :checked').css("border", "3px solid red"); \ }); \ </script> \ <style type="text/css"> \ .style1 \ { \ width: 600px; \ } \ .style2 \ { \ width: 200px; \ } \ </style> \ </head> \ <body> \ \ <h1> \ Example Form Document</h1> \ <form action="" method="post"> \ \ <table class="style1"> \ <tbody> \ <tr> \ <td class="style2"> \ First Name</td> \ <td> \ <input id="FirstName" type="text" /></td> \ </tr> \ <tr> \ <td class="style2"> \ Last Name</td> \ <td> \ <input id="LastName" type="text" /></td> \ </tr> \ <tr> \ <td class="style2"> \ Disabled Element</td> \ <td> \ <input id="Text1" type="text" disabled="disabled"/></td> \ </tr> \ <tr> \ <td class="style2"> \ Gender</td> \ <td> \ <input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td> \ </tr> \ <tr> \ <td class="style2"> \ What products are you interested in?</td> \ <td> \ <input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Widgets</label><br /> \ <input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Hibbity Jibbities</label><br /> \ <input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">SplashBangers</label><br /> \ <input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Whatzits</label></td> \ </tr> \ <tr> \ <td class="style2"> \ Comments:</td> \ <td> \ <textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td> \ </tr> \ <tr> \ <td class="style2"> \ Optional life story file</td> \ <td> \ <input id="File1" type="file" /></td> \ </tr> \ <tr> \ <td class="style2">&nbsp; \ </td> \ <td>&nbsp; \ </td> \ </tr> \ <tr> \ <td class="style2">&nbsp; \ </td> \ <td> \ <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" \ type="reset" value="reset" /></td> \ </tr> \ </tbody></table> \ \ </form> \ </body> \ </html> \ I repeat again it didn't work on firefox 3.6.13 \ My Jquery version is 1.5 \ \ '''My Example:''' \ {{{ \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \ \ <html xmlns="http://www.w3.org/1999/xhtml"> \ <head> \ <title>Using Form Selectors and Filters</title> \ <script type="text/javascript" src="../jquery.js"></script> \ <script type="text/javascript"> \ $("document").ready(function() { \ $('form :checked').css("border", "3px solid red"); \ }); \ </script> \ <style type="text/css"> \ .style1 \ { \ width: 600px; \ } \ .style2 \ { \ width: 200px; \ } \ </style> \ </head> \ <body> \ \ <h1> \ Example Form Document</h1> \ <form action="" method="post"> \ \ <table class="style1"> \ <tbody> \ <tr> \ <td class="style2"> \ First Name</td> \ <td> \ <input id="FirstName" type="text" /></td> \ </tr> \ <tr> \ <td class="style2"> \ Last Name</td> \ <td> \ <input id="LastName" type="text" /></td> \ </tr> \ <tr> \ <td class="style2"> \ Disabled Element</td> \ <td> \ <input id="Text1" type="text" disabled="disabled"/></td> \ </tr> \ <tr> \ <td class="style2"> \ Gender</td> \ <td> \ <input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td> \ </tr> \ <tr> \ <td class="style2"> \ What products are you interested in?</td> \ <td> \ <input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Widgets</label><br /> \ <input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Hibbity Jibbities</label><br /> \ <input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">SplashBangers</label><br /> \ <input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Whatzits</label></td> \ </tr> \ <tr> \ <td class="style2"> \ Comments:</td> \ <td> \ <textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td> \ </tr> \ <tr> \ <td class="style2"> \ Optional life story file</td> \ <td> \ <input id="File1" type="file" /></td> \ </tr> \ <tr> \ <td class="style2">&nbsp; \ </td> \ <td>&nbsp; \ </td> \ </tr> \ <tr> \ <td class="style2">&nbsp; \ </td> \ <td> \ <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" \ type="reset" value="reset" /></td> \ </tr> \ </tbody></table> \ \ </form> \ </body> \ </html> \ }}}
priority: undecidedlow
resolution: → invalid
status: newclosed

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

You could have commented on your original bug report that it was closed incorrectly because addyosmani missed the space between form and :checked instead of opening a new ticket and posting a code blob.

After checking your old and new ticket and the code sample I conclude that this isn't a bug in jQuery. You can easily verify that by looking at this test case. It shows that the selector works and that .css does indeed apply the style, the problem is you don't see it because some browser refuse to actually display the stylings on inputs.

It's a well known problem that the styling of input tags with CSS is difficult because of the very different way browsers handle this. Just google for terms like css, styling, input, radiobutton, checkbox, ... and you will find lots of content. For a starter you can check http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css . Then you might want to look for a readymade solution (e.g. some jQuery plugin) which handles all this crossbrowser quirks for you.

Changed February 15, 2011 01:35PM UTC by jitter comment:2

#8276 is a duplicate of this ticket.