How to Checkbox and label style only with CSS

问题

somebody can help me with how can I design checkbox and label like on the shared picture only with css : Hover effect, normal and when is checked with blue inside

I am trying to do but I can't.

回答1:

The below should give you a decent starting point. You want to style a related label and its :before pseudo element dependant on the :checked state of a preceding checkbox, which is hidden itself.

Demo Fiddle

And a revised version, with slightly more complex CSS

HTML

<input id='check1' type='checkbox'>
<label for='check1'>Click me!</label>

CSS

input[type=checkbox] {
    display:none;
}
input[type=checkbox]:checked +label:before {
    background:blue;
}
label {
    color:blue;
}
label:before {
    content:'';
    height:1em;
    width:1em;
    border:1px solid blue;
    display:inline-block;
}

回答2:

Here is the fully adjusted version:

FIDDLE DEMO

Source code is taken directly from @SW4 and he should get the credit.

HTML:

<input id='check1' type='checkbox'>
<label for='check1'>Click me!</label>
<br/>
<input id='check2' type='checkbox'>
<label for='check2'>Click me!</label>
<br/>
<input id='check3' type='checkbox'>
<label for='check3'>Click me!</label>
<br/>

CSS:

input[type=checkbox] {
    display:none;
}
input[type=checkbox]:checked +label:before {
    background:#01A6DE;
    width: 15px;
    height: 15px;
    border: 0;
}
label {
    color:black;
    font-family:arial;
    font-size:12px;
    position:relative;
    padding-left:20px;
}
label:hover {
    color:#01A6DE;
}
label:hover:before {
    border:1px solid #01A6DE;
}
label:before {
    content:'';
    height:13px;
    width:13px;
    border:1px solid lightgray;
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
}

来源：https://stackoverflow.com/questions/24909127/how-to-checkbox-and-label-style-only-with-css

标签

css

checkbox

label