how to set input type checkbox border and background?

Question

I need to set an input type checkbox right side padding to 10px and border-right:1px solid #000. I am trying this but the checkbox not taking the values. Does anybody know why it isn't working?

I am using the following code:

input[type="checkbox"] {
  border-right:1px solid #fff;
  margin-right:10px;
}

The border doesn't take.

I tried something at fiddle.jshell.net/edn8E and jsfiddle.net/jtbowden/xP2Ns have a look — Yasser Shaikh
– Yasser Shaikh, Commented Jul 10, 2012 at 11:56
Also see stackoverflow.com/questions/2460501/… and stackoverflow.com/questions/1986608/css-styling-checkboxes — Yasser Shaikh
– Yasser Shaikh, Commented Jul 10, 2012 at 11:59

score 4 · Accepted Answer · 2012-07-10 12:18:21Z

4

This is one of those elements what browsers tend not to let you style that much, and mostly people replace it with javascript.

Why dont you give pretty checkbox a try? :) http://www.no-margin-for-errors.com/projects/prettycheckboxes/

Edit:

Here is an example: http://jsfiddle.net/v4Dde/2/ this is how i made it once with out javascript, hope it helps you (sorry about the color just made them this way so you can see :) )

edited Jul 10, 2012 at 12:18

answered Jul 10, 2012 at 11:52

user1130272

Sign up to request clarification or add additional context in comments.

Comments

Sylvain B · Accepted Answer · 2012-07-10 11:57:41Z

1

Have you try using outline instead of border ?

For example :

outline : 2px solid #000000;

answered Jul 10, 2012 at 11:57

Sylvain B

5503 silver badges9 bronze badges

Collectives™ on Stack Overflow

how to set input type checkbox border and background?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related