checkbox-customization

Question

I have used following code for getting rounded corners on a checkbox

input[type=checkbox]{
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px
    display: inline-block;
    position: relative;
    height: 15px;
    width: 15px;
    padding-right: 16px;
    padding-bottom: 13px;
}

But its not working in Mozilla. Can you sugest me some code please?

There's an error in your code, you should have a semi-colon before display: inline-block (note this doesn't solve the question) — Sean
– Sean, Commented Nov 27, 2012 at 13:51
You could try the jQuery UI for this. So easy to use :) jqueryui.com/button/#checkbox — Ron van der Heijden
– Ron van der Heijden, Commented Nov 27, 2012 at 15:58
Or, if you are using jQuery there's a nice plugin line25.com/articles/… — Alex
– Alex, Commented Nov 27, 2012 at 15:59

service-paradis · Accepted Answer · 2013-09-24 20:47:33Z

1

This post is old but this is what i suggest:

Associate labels to your checkboxes like this:

<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>

Hide by css your checkboxes:

.checkboxes input[type=checkbox]{
    display:none
}

Style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes. I keep them square in my example but you could add your border radius easily in the css.

Here is the jsfiddle

answered Sep 24, 2013 at 20:47

service-paradis

3,4184 gold badges39 silver badges49 bronze badges

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

Comments

Diodeus - James MacFarlane · Accepted Answer · 2012-11-27 15:54:45Z

0

Checkboxes (radio buttons and SELECT) are rather OS-specific, and are generated by the OS more than the browser. The ability to style these elements has always been quite limited.

answered Nov 27, 2012 at 15:54

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Collectives™ on Stack Overflow

checkbox-customization

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related