I try to learn jQuery. I watch a Lynda training video in which there is the following code
$("document").ready(function() {
$("form :checked").css("border", "3px solid red");
});
The above code works correctly on ie and opera but it doesn’t work on firefox and webkit (chrome,safari).
The version of the jquery is 1.3.2 .What is the problem with above? How can I achieve cross browser compatibility with form selectors?
Edit: The html code is the following
<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>
Other browsers don’t let you style the border of checkboxes…
The logic is correct, just not applying the styles in Firefox/Webkit.
http://jsfiddle.net/vVN6x/
Note that the margins work in the sample, but not the borders (unless you are in IE)