how can i style checkbox using CSS?


How to style checkbox using CSS, I am trying to use this HTML/CSS code, but it is not working

<input type="checkbox" class"checkBoxStyle" />

CSS

.checkBoxStyle{
border:1px solid black;
display:block;
background:#f00;
}

I am new to HTML/CSS, and would like to know about it, thanks


Asked by:- Vipin
2
: 224 At:- 7/26/2017 11:07:23 AM
CSS Style-checkbox HTML checkbox






2 Answers
profileImage Answered by:- vikas_jk

You cannot directly apply CSS to checkbox, In that in modern browsers, we can use only CSS to style checkbox, in older browser you need the support of javascript also.

Let's go for CSS only solution first

<input type="checkbox" id="c1" name="cc" />
<label for="c1">
    <span></span>Check Box 1
</label>

CSS code for it

/*hide the actual checkbox.*/
input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    color:#f2f2f2;
}
/*show background as sprite sheet for checkbox, so here we what we have to do is set the background position on this span, which is image*/
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

/*change background image using sprite*/
input[type="checkbox"]:checked + label span {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -19px top no-repeat;
}

here what were are using this code

input[type="checkbox"]:checked + label {
 
}

with the help of CSS3 pseudocode  we are able to check the status of checkbox(if it is checked or unchecked), if it is checked we are selecting the element directly following the checkbox or radio using +

With the help of above code, we are toggling the CSS sprite images, the complete image is here

check_radio_sheet

here is the actual Source and Codepen link

Here are some useful links, which may help you to style radio buttons using CSS

2
At:- 7/26/2017 12:24:00 PM
thanks the above answer worked for me 0
By : Vipin - at :- 8/13/2017 8:17:33 AM


profileImage Answered by:- jaya

Above answer is correct to style checkbox using CSS, but here is another solution and to understand it in a better way.

Basically we are toggling the HTML for attribute on <label> matches the id on <input>, so clicking on the <label> will toggle the <input> checkbox.So it will be like

<input id="toggle" type="checkbox">
<label for="toggle">

then we are hiding the <input> using

input {
    position: absolute;
    left: -9999px;
}

Now, we need to convey the checked/unchecked state, which we can do that with <label>, as input is already hidden, using the code

input:checked + label {
    /*styles */
}

combination of the :checked pseudo-class and the + adjacent sibling selector means “when the checkbox is checked, find the <label> right after it and apply styles”

In this way, we achieve the styling of checkbox using radio button, here is the full description and source of my answer, which is easy to understand.

1
At:- 7/26/2017 12:37:40 PM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use
Amazon Deals

Jobs from Indeed