Modify ↓
Ticket #8278 (closed bug: invalid)
Re: FireFox 3.6.13 Selecting Form Checkboxes checked items
| Reported by: | s.hamed.afghan@… | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | css | Version: | 1.5 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description (last modified by jitter) (diff)
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>
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Note: See
TracTickets for help on using
tickets.
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.
Dupe of #8276