Customizing Components: Radio Button
Once again I’m here sharing with you one of Wolox’s custom HTML components. This isn’t as hard as the previous one talking about Range Input, but it’s very useful because radio buttons are used everywhere. First of all, let me show you an image of the result and how the HTML looks. We’ll discuss its components right after the code.
So let’s start talking about the structure, there’s a wrapper div with class .radio that will determine the size of the whole element. Inside of it there’s an input with type radio that is the real radio button that will be kept transparent just for styling purposes. We also have a container div that will be used to show the radio button’s background style and a fill div which will be triggered by the input and will show the styled UI.
Related Post: Customizing Components: Range Input
Now that we have a solid structure let’s style the whole thing. As we did before, I’ll show you the code first and then we’ll analyze it.
You can see that I created four variables so you can customize it easily. I used the “opacity: 0” property to make the input invisible and using the “.radio-input:checked ~ .radio-fill” selector I styled the way the radio button is filled.
See also: Time Zones, that thorn in our side
That’s all you need to create your own customized radio buttons, no js needed as you would expect. I’ll proceed to leave the codepen we created so you can use the code wherever you want and If you haven’t checked our custom slider you can do so by clicking here.
Thanks for reading and I hope you found this post useful!
Posted by Gabriel Zanzotti (gabriel.zanzotti@wolox.com.ar)
