This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mysterio
Hello Guys today i will be discussing about how to create a custom checkbox or radio button with css.
I got this design from @kevinpowell and thanks to him that i know many new things in CSS today.
Let's get started...
So, To create a custom checkbox or radio button, all you have to do is apply the "appearance:none" property to the checkbox or radio buttona and then style the checkbox or radio button by providing it the custom width and height and other stylings related to colors, borders, backgrounds.
Example of custom radio button
<input type="radio" name="theme" checked />
input[type="radio"]{
appearance: none;
width: 1.2rem;
height: 1.2rem;
outline: 2px solid crimson;
outline-offset: 2px;
border-radius: 50%;
}
- It will create a custom radio button with some custom stylings
- You can do the same for the checkbox also by using type=checkbox and then setting the type in css selector as checkbox.
Targeting the checked state -
input[type="radio"]:checked {
background: red;
}
- When you click the radio button, its background color will become red.
- You can also provide other stylings to the checked state.
Codepen Example
- You would love this one for sure
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd
https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144
https://dev.to/shubhamtiwari909/swiperjs-3802
https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mysterio
Mysterio | Sciencx (2022-12-10T08:01:05+00:00) Custom checkbox and radio buttons in CSS. Retrieved from https://www.scien.cx/2022/12/10/custom-checkbox-and-radio-buttons-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.