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.
Is it possible to style a checkbox like this?
The best way to do this is to remove the default appearance of the checkbox using appearance: none;
. From there, you can change anything about its style you want to. Here is an example that gets close to what you are wanting.
/* The checkbox holder */
.checkbox {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
/* The checkbox */
.checkbox > input {
/*
Remove the default appearance.
*/
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
/*
Set the size of the checkbox.
*/
width: 20px;
height: 20px;
box-shadow: 0 0 0 2px black; /* Outer border */
border: 3px solid white; /* Inner border */
}
/* The checkbox - when checked */
.checkbox > input:checked {
background-color: black; /* The "check" */
}
<h1>Item List</h1>
<div class="checkbox">
<input id="item1" type="checkbox">
<label for="item1">Item 1</label>
</div>
<div class="checkbox">
<input id="item2" type="checkbox">
<label for="item2">Item 2</label>
</div>
<div class="checkbox">
<input id="item3" type="checkbox">
<label for="item3">Item 3</label>
</div>
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.
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 add CSS styles to checkbox on selection?
You don't need any function for this, you can do this with good understanding of css selectors
You can try:
input[type="checkbox"]:checked+span {
text-decoration: line-through;
color:red;
}
and define your text box like
<input type="checkbox" ><span>Some text label for checkbox</span>
Here is an example
CSS checkbox input styling
With CSS 2 you can do this:
input[type='checkbox'] { ... }
This should be pretty widely supported by now. See support for browsers
Related Topics
Loading Images from External Folder to Component Angular 2
How to Allow Http Content Within an Iframe on a Https Site
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)
Create an Object for Google Chrome
How to Declare a Variable in a Template in Angular
Angular 2: Get Position of HTML Element
Why Align Items Center Not Working
How to Make Bootstrap 4 Cards the Same Height in Card-Columns
How to Change Bootstrap 4 Drop-Down Colors
Why Is There a White Space Between Parent Div and Inner Div in React
Html Wont Link to CSS File in Visual Studio Code
Change Default Text in Input Type="File"
How to Put CSS @Media Rules Inline
Fixed Headers on Scroll Inst Working Correctly in Angular Application
How to Get an Iframe to Be Responsive in iOS Safari
Displaying Comma Separated String in Angular 6
Why Position:Sticky Is Not Working When the Element Is Wrapped Inside Another One