Why cannot change checkbox color whatever I do?
Checkboxes are not able to be styled. You would need a third party js plugin there are many available.
If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox.
The same problem will arise when trying to style that little down arrow on a drop-down select element.
How to style a checkbox using CSS
UPDATE:
The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.
Here are some useful links:
- Creating Custom Form Checkboxes with Just CSS
- Easy CSS Checkbox Generator
- Stuff You Can Do With The Checkbox Hack
- Implementing Custom Checkboxes and Radio Buttons with CSS3
- How to Style a Checkbox With CSS
It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked
selector, you can make your replacement correctly reflect the checked status of the box.
OLDER ANSWER
Here's a useful article about styling checkboxes. Basically, that writer found that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.
It's not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without JavaScript would see the default checkbox.
Edited to add: here's a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.
How to change checkbox background color in simple HTML
You can't style the browser's default checkbox, so we have to hide it and create a custom checkbox like so:
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 2px black solid;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #002B4E;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 6px;
top: 3px;
width: 5px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
transform: rotate(35deg);
}
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
How in SASS i can select an input type checkbox, checked and disabled?
Here is the code you can try.
input {
&:checked:disabled{
background-color:red;
}
}
However the styles won't work for checkbox. As checkbox can not be styled natively yet. See for reference css - Why Cannot Change Checkbox Color Whatever I Do?
Checkbox background color when checked - not working
.container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container input { position: absolute; opacity: 0; cursor: pointer;}
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee;}
.container:hover input ~ .checkmark { background-color: green;}
.container input:checked ~ .checkmark { background-color: green;}
.checkmark:after { content: ""; position: absolute; display: none;}
.container input:checked ~ .checkmark:after { display: block;}
.container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Checkbox Test</title></head><body><label class="container">Dias One <input type="checkbox" checked="checked"> <span class="checkmark"></span></label><label class="container">Dias Two <input type="checkbox"> <span class="checkmark"></span></label><label class="container">Dias Three <input type="checkbox"> <span class="checkmark"></span></label></body></html>
Related Topics
How to Make a Chevron Arrow Using CSS
How to Force Table Cell <Td> Content to Wrap
How to Stretch Flex Child to Fill Height of the Container
Css3 Scale - Prevent from Scalling Text
Prevent "Overscrolling" of Web Page
How to Change the Size of the Radio Button Using CSS
Styling an Anchor Tag to Look Like a Submit Button
Animating Linear Gradient Using CSS
Node.Js - How to Send Data from HTML to Express
Is It Bad to Use Uppercase Letters for HTML Tags
How to Center an Iframe Horizontally
With a Browser, How to Know Which Decimal Separator Does the Operating System Use
How to Change the Color of <Div> Element Depending on Its Height or Width
Inspect Webkit-Input-Placeholder with Developer Tools
How to Select an Element That Has a Certain Class
Use HTML5 (Datalist) Autocomplete with 'Contains' Approach, Not Just 'Starts With'