I want to style input checkboxes and radio buttons so it is purple checkmark, purple border and white background.
I tried this for a checkbox but it didn’t work. Is this possible to do with checkboxes and radio buttons.
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: purple;
}
<input type="checkbox"> Four
<span class="checkmark"></span>
</label>
Hi,
You can style the checkboxes, see this thread for some of the different ways.
Css for input checkbox, and a codepen demo from Paul OB in post #13
Thanks this helps a lot. I still would like to know how to get the actual checkmark to be purple. I still can’t figure that out based off of Paul’s example. I’ve been playing around with the css and the checkmark is still black.
The checkmark is an svg image so you need to create your own. However, I believe you can add a fill to the data uri and get the result you want.
I’ve updated the codepen.
I added fill: %23800080 to the svg data uri which seems to work (although svgs are mainly a mystery to me).
It should work in modern browsers and be usable in older ones (ie11 just gets the old black checkmark and border).
For checkbox
The HTML
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
The CSS
.checkbox-custom {
display: none;
}
.checkbox-custom-label {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
background: #fff;
border-radius: 0px;
border: 2px solid #800080;
display: inline-block;
vertical-align: middle;
width: 15px; height: 15px;
padding: 2px; margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:after {
content: "";
padding: 2px;
position: absolute;
width: 2px;
height: 15px;
border: solid #800080;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
top: 2px; left: 5px;
}
For radio buttons.
The HTML
<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>
The CSS
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #666;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #800080;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #800080;
}
Thanks
It’s the same technique for the checkbox except that you have to style the ‘check mark’ by using an image (or other means such as borders/transforms which is awkward).
There is also the long standing issue that the checkbox hack (the method you are using) fails on older android and older ios, although that isn’t so much of a problem these days.
The method used in my codepen is much simpler than the checkbox hack and a little easier to manage.
Resolved 
Thanks by the way
oooops, had a brain fart. 
coothead
Hi Paul,
Is there a way to have the checkmarks where they don’t look like it comes in like they are coming from the side when you check the box? I noticed that when checking the box. Is that a style thing?
Yes the checkbox is animated into position which gives a nice visual clue to the user that something has changed and is good for accessibility. Sometimes when things change immediately people don’t realise what just happened.
If you want it to happen instantly then remove the transition from this rule (the last property and value).
input[type="checkbox"] {
width: 2.2em;
height: 2.2em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: 2px solid #800080;
border-radius: 3px;
vertical-align: middle;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;fill: %23800080' xml:space='preserve'%3e%3cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z'/%3e%3c/svg%3e");
background-repeat:no-repeat;
background-size:cover;
background-color:#eee;
background-position:-10em -10em;
transition:.3s ease;
}
I’ve updated the codepen so that the tick grows from the centre.
It’s just a matter of styling as you wish.
Hi there mldardy,
if you just want a colour change for “checkboxes” and “radio buttons”
without animations check out the attachment…
custom-form-radio-and-checkboxes.zip (11.6 KB)
coothead
What if i want to use some other colors?
I wanna know the details about customizing checkbox and radio buttons…
Can you please explain a bit what do i do when i want to make these as i wish?
I wouldn’t as that method hides the input with display:none which breaks tabbing and selection/activation in various browsers/screenreaders.
The input should be moved off-screen or hidden with the clip method.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.