0

How to change the border color of the checkbox and radio button (circle and rectangle color) using CSS?

I tried lot but not getting a correct one.

Please advice me?

putvande
  • 15,068
  • 3
  • 34
  • 50
Naju
  • 1,541
  • 7
  • 27
  • 59
  • 1
    In what browser are you looking? Some browser don't allow you to change the style of those elements. – putvande Aug 01 '13 at 12:25
  • check this: https://www.google.co.in/?gws_rd=cr#newwindow=1&sclient=psy-ab&q=css%20custom%20checkbox%20and%20radio%20button&oq=&gs_l=&pbx=1&bav=on.2,or.r_cp.r_qf.&bvm=bv.50165853,d.bmk&fp=55ad5f80dce46606&biw=1215&bih=938&pf=p&pdl=300 – Code Lღver Aug 01 '13 at 12:27

3 Answers3

3

It simply is not possible. However, there is a workaround where the actual checkbox is made invisible and the styled label is used as an overlay. Looks good and works fine.

More about it here: http://css-tricks.com/the-checkbox-hack/

eevaa
  • 1,397
  • 1
  • 11
  • 17
1

Wrap the checkbox with a div and then put a border around it or create a table and put border around the td

div{
   border: 1px solid red
}

or

td{
   border: 1px solid red
}


<div>
   <input type="checkbox"/>
</div>
Anton
  • 32,245
  • 5
  • 44
  • 54
1

You can make a custom radio button. You can use js to show or hide a image. Image will be looks like as designed check box and original checkbox should be hide. Change the value of checkbox on image click.

Ankit Jain
  • 1,226
  • 1
  • 10
  • 17