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 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 #8276 → 1297776925581277 |
|---|---|
| component: | unfiled → css |
| 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> \ → 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> \ }}} |
| priority: | undecided → low |
| resolution: | → invalid |
| status: | new → closed |
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
formand:checkedinstead 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
.cssdoes 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.