This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
Beautiful Radio and Checkbox Inputs Only with CSS
No Need for Javascript to Change Browser Specific Input Appearance
Have you ever wondered if there’s a way to change the look of a checkbox or radio input without using Javascript, keeping the standard browser functionality, only using CSS?
Web designers want developers to make these input elements look like they styled them in their design tools. But the only way is to fake the browser functionality with Javascript.
Using any HTML element, give it a style for not checked and one for checked, change the style with an “onclick” event and change the value of a hidden input.
I was never very happy with this solution, and one day another project with this requirement came my way. So I tried to find a way without Javascript. After spending a lot of time playing around with CSS and different web browsers, I found a solution that’s also quite simple.
CSS “Appearance” Does the Magic
input[type="checkbox"],
input[type="radio"] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
These few lines give us a blank invisible input element in Edge, Firefox, Chrome, Safari, and Opera. Now we can do what we want to do: width, height, background-color, border, border-radius, box-shadow, and maybe the most important property: background-image!
And the State Checked?
Yes, that’s easy too. Just add this to your CSS code:
input[type=radio]:checked {
properties: you-want;
}By the way, you can also use the pseudo-class “:hover”.
Maybe you ever tried “:after” or “:before” for radio or checkbox inputs, and you noticed it’s not working in Firefox. Without Firefoxes default appearance, it is doing it now!
Here’s a complete example code, you can copy-paste and then play with:
input[type=checkbox],
input[type=radio] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
input[type=radio] {
border-radius: 100%;
background-image: url(bg_radio_off.png);
}input[type=radio]:checked {
background-image: url(bg_radio_on.png);
}input[type=checkbox] {
background-image: url(bg_checkbox_off.png);
}input[type=checkbox]:checked {
background-image: url(bg_checkbox_on.png);
}What Is Internet Explorer 10, 11 Doing?
They only render the width and height properties, all the rest will be ignored, and they use their default styling. I think we can live with it.
Conclusion
With this bit of CSS you quickly get rid of browser-specific styling for radio and checkbox inputs, without Javascript, but with the full browser native functionality.
Happy coding!
Beautiful Radio- and Checkbox Inputs Only with CSS was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
The Tech Maker | Sciencx (2021-10-28T02:29:45+00:00) Beautiful Radio- and Checkbox Inputs Only with CSS. Retrieved from https://www.scien.cx/2021/10/28/beautiful-radio-and-checkbox-inputs-only-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.