Styling checkboxes and radiobuttons

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

    <input id="Checkbox1" type="checkbox" checked="checked"/>Widgets
    <input id=开发者_开发技巧"Checkbox2" type="checkbox" />Views    
    <input id="Checkbox3" type="checkbox" />Contents
    <input id="Checkbox4" type="checkbox" checked="checked" />Services

 Gender:<input id="Radiobox1" type="radio" />M<input id="F" type="radio" />F <br /> <br /> <br />

No style is applied to the checkboxes and radiobuttons... why?

Seems like the problem is unrelated with jQuery. Browsers won't allow css customization on such elements.

Check there.

Your javascript is giving all input elements inside a form a 3 pixel red border. You don't have a form so it won't do anything.

You can do this all in css instead. If you stick the following in your head, it should work:

<style type="text/css">
input { border: 3px solid red; }
</style>

As TonioElGringo said, it looks like it won't do anything anyway, but I'm guessing you're putting a border on as a placeholder (to prove the javascript works) for something prettier?