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.
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
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>
Checkbox styling only css
The first thing you need to do with your code is add a label
, e.g.:
<form>
<input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter">
<label for="newsletter">Ich möchte den Newsletter bekommen</label>
</form>
I've also added an id
and name
attribute to the checkbox. The id
needs to be the same as the for
attribute on the label
for this trick to work.
Next, we need to visibly hide the checkbox. I tend to use a class of sr-only
in the CSS to visibly hide things based on Yahoo's example:
.sr-only{
height: 1px;
width: 1px;
overflow: hidden
clip: rect(1px,1px,1px,1px);
position: absolute;
}
Next we create a pseudo element before
the label. For the style rules I'm using the adjacent sibling selector (+
) to apply the rules when the label is an adjacent sibling of the checkbox. I'm keeping your class name so it'll only target labels that're siblings of class newsletter
:
.newsletter:not(checked) + label:before{
content:" ";
display: inline-block;
width:13px;
height: 13px;
border: 2px solid black;
border-radius:3px;
}
The :not(checked)
means apply these rules when newsletter
is not checked.
To change the styles when newsletter
is checked
we change the background colour like this:
.newsletter:checked + label:before{
background-color:black;
}
This way clicking our pseudo checkbox or the text in the label will check the box (clicking the label at all sends focus to the field, so with a checkbox will check it).
CSS Checkbox styling unique classes
See if this works
input[type="checkbox"]:checked + .usethis {
color: red;
font-size: 5rem; // i have given some random styles here
}
This style will only come when the checkbox is checked, and if you have another checkbox in the page without the label having the class .usethis, this style wont be applied to those checkboxes
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
Checkbox CSS :checked styling
You need to change all checked selectors to this:
input[type="checkbox"]:checked + .check-box-effect:before
label { display: inline-block; color: #fff; cursor: pointer; position: relative;}
label .check-box-effect { display: inline-block; position: relative; background-color: transparent; width: 25px; height: 25px; border: 2px solid #dcdcdc; border-radius: 10%;}
label .check-box-effect:before { content: ""; width: 0px; height: 2px; border-radius: 2px; background: #626262; position: absolute; transform: rotate(45deg); top: 13px; left: 9px; transition: width 50ms ease 50ms; transform-origin: 0% 0%;}
label .check-box-effect:after { content: ""; width: 0; height: 2px; border-radius: 2px; background: #626262; position: absolute; transform: rotate(305deg); top: 16px; left: 10px; transition: width 50ms ease; transform-origin: 0% 0%;}
label:hover .check-box-effect:before { width: 5px; transition: width 100ms ease;}
label:hover .check-box-effect:after { width: 10px; transition: width 150ms ease 100ms;}
input[type="checkbox"] { display: none;}
input[type="checkbox"]:checked + .check-box-effect { background-color: red !important; transform: scale(1.25);}
input[type="checkbox"]:checked + .check-box-effect:after { width: 10px; background: #333; transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked + .check-box-effect:before { width: 5px; background: #333; transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked:hover + .check-box-effect { background-color: #dcdcdc; transform: scale(1.25);}
input[type="checkbox"]:checked:hover + .check-box-effect:after { width: 10px; background: #333; transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked:hover + .check-box-effect:before { width: 5px; background: #333; transition: width 150ms ease 100ms;}
<label> <input type="checkbox" id="chkProdTomove" /> <span class="check-box-effect"></span> </label>
Related Topics
How to Change Placeholder Color on Focus
How to Select First and Last Td in a Row
Sizing Div Based on Window Width
How to Emulate Prefers-Color-Scheme Media Query in Chrome
How to Ignore Parent Element's Overflow:Hidden in CSS
Ie10 and Flexboxes? (Nightmare)
How to Create a CSS Rule for All Elements Except One Class
Differencebetween Pseudo-Classes and Pseudo-Elements
Changing Border Color in Mat-Form-Field
Is There an Opposite CSS Pseudo-Class to :Hover
@Font-Face Failed Opentype Embedding Permission Check. Permission Must Be Installable
Twitter Bootstrap CSS That Support from Rtl Languages
CSS Reset, Default Styles for Common Elements
Can CSS Choose a Different Default Font and Size Depending on Language
How to Remove Space (Margin) Above HTML Header
Failed to Decode Downloaded Font
Is There Any Clean CSS Method to Make Each Letter in a Word a Different Color