Styling a checkbox without the label tag
Solution 1
===================================================================
Css solution (will work in the Chrome, not in FF, IE)
You can apply custom style to the checkbox using css :after
, :checked
.
Please see below code or jsfiddle
HTML
<input type="checkbox"/>
CSS
input[type='checkbox']:after{
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-top: -4px;
margin-left: -4px;
border: 1px solid rgb(192,192,192);
border-radius: 0.25em;
background: rgb(224,224,224);
}
input[type='checkbox']:checked:after {
width: 15px;
height: 15px;
border: 3px solid #00ff00;
}
FIDDLE https://jsfiddle.net/guruling/evfr3kk3/
Hope this will help you to apply your checkbox custom styling.
===================================================================
NEW UPDATED :: Cross browser solution with jQuery
HTML
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
CSS
.custom-checkbox{
line-height: 1.5em;
display: inline-block;
width: 18px;
height: 18px;
margin-top:0px;
margin-right: -18px;
border: 1px solid rgb(192,192,192);
border-radius: 0.25em;
background: rgb(224,224,224);
box-sizing:border-box;
}
.custom-checkbox.checked{
width: 18px;
height: 18px;
border: 3px solid #00ff00;
box-sizing:border-box;
}
input[type="checkbox"]{
margin: 0px;
height: 16px;
width: 19px;
opacity:0;
}
JS
function setCheckbox(elem){
if($(elem).is(':checked')){
$(elem).prev('.custom-checkbox').addClass('checked');
}else{
$(elem).prev('.custom-checkbox').removeClass('checked');
}
}
$(document).ready(function(){
// apply custom checkbox on page ready
$('input[type="checkbox"]').before('<span class="custom-checkbox">');
$('input[type="checkbox"]').each(function(){
setCheckbox($(this));
});
});
// on input change, change custom checkbox
$('body').on('change', 'input[type="checkbox"]', function(){
setCheckbox($(this));
});
FIDDLE https://jsfiddle.net/guruling/2rsa7ghn/48/
Solution 2
input[type=checkbox]:checked:before {
top: 2px;
left: 1px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #35ac19;
border-bottom: 2px solid #35ac19;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
input[type=checkbox]:before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid #A9ABAE;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
background:#fff;
}
<input type="checkbox" >
jsFiddle: https://jsfiddle.net/chandan20j/myr2fe13/3/
Solution 3
You can use this for some browsers!
CSS
input[type='checkbox']:after {
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
background: rgb(224,224,224);
}
input[type='checkbox']:checked:after {
content: '✔';
text-align: center;
}
HTML
<input type="checkbox"/>
It looks nice, you can customize it!
Admin
Updated on June 05, 2022Comments
-
Admin almost 2 years
I made a checkbox style and it uses the label tag. See below
Is it possible to still have the CSS of the entire checkbox without the label tag? So i just have the Input tag, but still the CSS. Here is the CSS of the checkbox.
.control { font-size: 18px; position: relative; display: block; margin-bottom: 15px; padding-left: 30px; cursor: pointer; } .control input { position: absolute; z-index: -1; opacity: 0; } .control__indicator { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background: #e6e6e6; } .control--radio .control__indicator { border-radius: 50%; } .control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator { background: #ccc; } .control input:checked ~ .control__indicator { background: orange; } .control:hover input:not([disabled]):checked ~ .control__indicator, .control input:checked:focus ~ .control__indicator { background: #ecb53a; } .control input:disabled ~ .control__indicator { pointer-events: none; opacity: .6; background: #e6e6e6; } .control__indicator:after { position: absolute; display: none; content: ''; } .control input:checked ~ .control__indicator:after { display: block; } .control--checkbox .control__indicator:after { top: 4px; left: 8px; width: 3px; height: 8px; transform: rotate(45deg); border: solid black; border-width: 0 2px 2px 0; }
<label class="control control--checkbox"> <input type="checkbox"/> <div class="control__indicator"></div> </label>
I hope you guys can help me out.
-
Guruling Kumbhar over 7 yearsJust for my information, if the answer is accepted, then Why downvote?
-
Nirbhay Jha about 6 yearsthe "after" pseudo class does not work well with input elements in Firefox and IE
-
dineshkashera over 5 yearsGreat, its working fine in chrome but not in firefox.
-
Guruling Kumbhar over 5 years@dineshkashera - Thanks, I have updated my answer for cross browser solution. Hope it will be help someone.