Styling radio buttons
A radio button or option button is a little circular element that allows the user to choose only one of a predefined set of mutually exclusive options. Each radio button is normally accompanied by a label describing the choice that the radio button represents.
Radio buttons were named after the physical buttons used on older radios to select preset stations – when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the “pushed in” position.
If you stick with the default options, radio buttons look different on different browsers, and most of all they look disconnected from the graphic style of a website. This is how radio buttons look by default in your browser:
Fortunately the styling of radio buttons became possible with the introduction of CSS3. There are literally hundreds of different ways you can style your CSS radio buttons and checkbox input fields. We have made a basic style in only CSS that serves as starting point for our projects’ radio buttons. We then experiment with color, style, and even functionality to make them completely customized and unique for each client.
Here is our HTML and CSS3 only styled radio buttons, compatibles with all browsers. Feel free to use the code.