amin amin - 1 month ago 14
CSS Question

have css checkbox whithoud id and for?

How i can make a css ckeckbox+lebel without

id
and
for
.

I use this way but it dosnt work.i can have a css ckeckbox whit
id
and
for
like this :

<div class="checkbox">
<input id="f" type="checkbox" name="hi" class="checkbox" />
<label for="f">Hello</label>
</div>


But i wanna to have this :

<label class="checkbox">
<input type="checkbox" value="1" name="files" >
</label>


Then i use This CSS (SCSS in fact):

label{
input[type=checkbox]{
display: none;
}
}

.checkbox{
position: relative;
display: inline-block;
margin-right: 7px;
cursor: pointer;
vertical-align: middle;
&:after{
content: ' ';
position: absolute;
border: 2px solid $black;
border-radius: 3px;
width: 20px;
height: 20px;
top: -5px;
left: -2px;
width: 14px;
height: 14px;
}
&:checked{
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
}
/* It dosnt work */
.checkbox:after > input[type=checkbox]:checked {
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}


But Checked check box dost show ?

Please help :)

Answer

You must use span in your Label tag.

.checkbox:after > input[type=checkbox]:checked

This line not make sense because its need to be the opposite. So I'm change it to this:

input[type=checkbox]:checked ~ .checkbox:after

When you check ~ do something with the next element.

So, i add a span to complete your problem. Here we go:

Working Fiddle

$blue : blue;
$black : black;

label{
    input[type=checkbox]{
        opacity: 0;
    }
}

.checkbox{
    position: relative;
    display: inline-block;
    margin-right: 7px;
    cursor: pointer;
    vertical-align: middle;
    &:after{
        content: ' ';
        position: absolute;
        border: 2px solid $black;
        border-radius: 3px;
        width: 20px;
        height: 20px;
        top: -5px;
        left: -2px;
        width: 14px;
        height: 14px;
    }
    &:checked{
        font-family: 'FontAwesome';
        font-size: 2em;
        content: "\f00c";
        color: $blue;
        border-radius: 3px;
    }
}
/* It dosnt work */
input[type=checkbox]:checked ~ .checkbox:after{
        font-family: 'FontAwesome';
        font-size: 1em;
        content: "\f00c";
        color: $blue;
        border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<label>
  <input type="checkbox" value="1" name="files" >
  <span class="checkbox"></span>
</label>

Comments