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, then we’ll discuss the “behind the scenes” 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. There’s an input inside of it with type radio which is the real radio button that will be kept transparent to make it interactive but not visible. The radio button’s background style will be handled using a ::before pseudo-element in the .radio and the fill will be represented with a div. This is because we need to make it change when that input is selected and a ::after pseudo-element can’t be targeted with a sibling selector. So we add the div with class .radio-fill that will show the styled UI when its related input is selected.