form :checked doesn't work ?

[capt_nemo777]

hi am experiencing this weird stuff while trying to learn jquery.
why is the "form :checked" selected doesn't work on FF and Chrome ?, but it works on IE8 :confused:

here's an html snippet (incomplete, just for showing example)

<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>


and here's the jquery stuff


<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('form :checked').css('border','3px solid red');
});
</script>


i don't know why it doesn't work in my primary browsers but it works with the annoying IE8

[VIPStephan]

why is the "form :checked" selected doesn't work on FF and Chrome ?

Because you can’t style form controls very well. Specifically checkboxes and radio buttons aren’t very flexible when it comes to styling. And on Mac they have the Aqua look, no matter what you try. Best is to just forget about it and leave them as they are. Alternatively you can add an element (e. g. a span) after the checkboxes while positioning the checkboxes outside of the viewport. Then you style these spans with custom checkbox background graphic and assign an onclick event that makes the span look different and also checks the checkbox (that is out of sight).

[capt_nemo777]

thanks for clarifying that up sir.