Member-only story
When it comes to web forms, checkboxes and radio buttons are elements that always appear. But in the environment when everything also needs to be beautiful, default ones aren’t good enough. And it is a task with which many developers with less experience in CSS struggle. In this post, I am describing how to achieve it on the example of a radio button.
Default browser elements problems
Many problems can happen when using default HTML elements. The first one is different looks between different browsers. In general, you want to have the same design and behavior in all browsers. You want colors and sizes to match with the rest of your app. With default ones, that is not the case. In the images below, you can notice differences between radio buttons in Chrome and ones in Microsoft Edge. While the only difference is color, the difference is still apparent. And in other browsers could be something else.
The second big issue is that there are no CSS rules for them. That means that you can’t style them directly. But there are different tricks for that, and that is the whole goal of this post.
