I would like to visually replace the default checkbox element with a styled div that appears on top of the checkbox. I don't want to use an image.
When checked:
<div style="width: 18px; height: 18px; background: #0e0; border-radius: 3px; border: 2px solid #555; color: #fff;">✓</div>
When unchecked:
<div style="width: 18px; height: 18px; background: #ccc; border-radius: 3px; border: 2px solid #555; color: #fff;"></div>
Can it be done?
Thanks!
used to this only css with label and css
.fancyCheckBox> input:checked + span{width: 18px; height: 18px; background: #0e0; border-radius: 3px; border: 2px solid #555; color: #fff;display:inline-block;vertical-align:top;}
.fancyCheckBox > input{display:none;}
.fancyCheckBox > input + span{width: 18px; height: 18px;background: #ccc;border: 2px solid #555; color: #ccc;border-radius: 3px;display:inline-block;vertical-align:top; } <label class="fancyCheckBox"><input type="checkbox" name="" checked /><span>✓</span></label>To grab quickly just copy and paste the code below or watch the DEMO.
<label for="test">Label for "checkbox"</label>
<label class="checkboxWrapper">
<input type="checkbox" name="test"/>
<span></span>
</label>
.checkboxWrapper input[type="checkbox"] {
display: none;
}
/*when unchecked*/
.checkboxWrapper span {
display:block;
width: 18px;
height: 18px;
background: #ccc;
border-radius: 3px;
border: 2px solid #555;
color: #fff;
}
/*when checked*/
.checkboxWrapper input:checked + span {
display:block;
width: 18px;
height: 18px;
background: #0e0;
border-radius: 3px;
border: 2px solid #555; color: #fff;
}
I used a span along with the input with type checkbox and make it hidden. Now instead of using a background image for the span I gave the property that you mentioned in your question but also added property of display:block since I am using span tag which is not a block element.
When the input is checked input:checked + span selector is used to select the span and again the property mentioned by you.
Note: Just be sure to add display: block if you are using span tag or any other inline element.
The html markup
<div style="" class="unchecked chkbox"></div>
CSS
.checked {
width: 18px;
height: 18px;
background: #0e0;
border-radius:3px;
border: 2px solid #555;
color: #fff;
}
.unchecked {
width: 18px;
height: 18px;
background: #ccc;
border-radius: 3px;
border: 2px solid #555;
color: #fff;"
}
Now the jQuery
$('.chkbox').click(function() {
var el = $(this);
if(el.hasClass('unchecked')) {
el.removeClass('unchecked').addClass('checked');
el.html('✓');
} else {
el.removeClass('checked').addClass('unchecked');
el.empty();
}
})
Demo can be seen here
Here is simple html , you can use this :
HTML :
<div>
<input type="checkbox" id="test1" >
<label for="test1"> Red </label>
</div>
CSS :
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
line-height: 19px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 3px; left: 4px;
font-size: 16px;
line-height: 0.8;
color: #000;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
/* accessibility */
