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

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Dmitry Makovetskiyd
  • 6,942
  • 32
  • 100
  • 160
  • this could help http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css. "his is one of those outstanding form elements that browsers tend not to let you style that much" – Nastya Kholodova Aug 12 '11 at 12:08

2 Answers2

2

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

Check there.

Community
  • 1
  • 1
TonioElGringo
  • 1,007
  • 1
  • 10
  • 17
0

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?

PhilJ
  • 303
  • 1
  • 8
  • You're quite right about his jQuery selector, but unfortunately radio, and checkbox, inputs can't be styled: [JS Fiddle demo](http://jsfiddle.net/davidThomas/6c6W5/). – David Thomas Aug 12 '11 at 11:55
  • What you could do (but isn't universally supported or EXACTLY the same as a border) is to use outline instead of border – PhilJ Aug 12 '11 at 12:04