I write cause i see this answers are getting old and no longer works
I want to style checkbox box and to have it later in js script.
<label>Are you sure?
<input type="checkbox">
</label>
Can someone tell me how to do this in 2018 ?
Add a comment
|
2 Answers
You can change the styling of a tickbox by using the :checked pseudo class.
input[type="checkbox"] {
-webkit-appearance: none;
border: 1px solid #0e0e0e;
width: 20px;
height: 20px;
border-radius: 3px;
}
input[type="checkbox"]:checked {
border: 1px solid red;
position: relative;
}
input[type="checkbox"]:checked:after {
content: "x";
}<label>Are you sure?
<input type="checkbox">
</label>
Comments
I found this really nice tutorial W3Schools You can go through it and it gives a step by step way of designing the checkbox.
For the JavaScript targeting
var checkbox = document.querySelector('input[type="checkbox"]')
checkbox.addEventListener('change',function () {
if(document.querySelector('input[type="checkbox"]:checked')){
//returns true if element is checked
alert("I am checked");
}
}) <label>Are you sure?
<input type="checkbox">
</label>This will target the checkbox add the change event listener waiting to listen to the change of state from unchecked to checked then using the if statement to see if the value is checked or not.
2 Comments
Freestyle09
Yeah, when u hide default checkbox this will work in js interactions??
Kwabena Muriuki
Yeah remember the checkbox is still there just opaque. In turn you could use the click event