Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

change checkbox border color

Tags:

jquery

css

border

can i change border color of checkbox by use css or jquery. i want change only border color of check box.

like image 948
Kali Charan Rajput Avatar asked Jun 15 '10 12:06

Kali Charan Rajput


People also ask

How do you change a checkbox border?

If you want to change the border of a checkbox, use the checkbox pseudo-class checked and specify its width, height, background, margin, and borderradius. If you want, you can also set the position to relative to make the border inside the box rather than outside.

How do I change the color of a checkbox?

“:hover” is used to style the checkbox when user hovers over it. Notice that when the mouse pointer move over the checkbox the color of it changes to yellow. “:active” is used to style the checkbox when it is active. Notice that when click the checkbox it will first notice a red color and then the green color.

How do I style a checkbox in CSS?

The checkbox is an HTML element used to take input from the user. It is hard to style the checkbox, but pseudo-elements makes it easier to style a checkbox. This HTML element is generally used on every website, but without styling them, they look similar on every website.


2 Answers

if you want to do this with pure css, you won't get an result that works in all browsers. if you use jqueryUI there are some implementations of checkboxes like this or this. otherwise you'll have to do something similar by yourself using images.

edit:
please note: as of today (march 2015) this post is about 5 years old - back then, the IE6 still had a market share of about 10% and even the newest IE (Version 8 at that time) was crappy as hell. This answer is technically outdated nowadays.

like image 114
oezi Avatar answered Sep 28 '22 09:09

oezi


Checkboxes are notorious for behaving differently to styles for each browser that renders them. As Nick Craver commented, images are the only reliable way to style checkboxes safely.

like image 24
starskythehutch Avatar answered Sep 28 '22 09:09

starskythehutch