Design Radio Notice For Free

By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none , you can remove the native styling altogether, and create your own styles for them.

Create an <input> element with type="radio" attribute. Then add a <span> element for designing our custom radio button. Also, add another <span> element for showing the value of the radio button. Finally, wrap the whole thing in a <label> element to increase the clickable area of our custom radio button.

HTML <div class="radios"> <div class="radio-wrap text-center"> <div class="radio-label- text-center">1</div> <input type="radio" id="radio1" value="option1" name="radio1" class="text-center"> <label for="radio1"></label> </div> <div class="radio-wrap text-center"> <div class="radio-label- text-center">2</div>

To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag. While using <label> isn't strictly necessary, it's considered a best practice for two reasons.

Example /* Customize the label (the container) */ ... /* Hide the browser's default radio button */ ... /* Create a custom radio button */ ... /* On mouse-over, add a grey background color */ ... /* When the radio button is checked, add a blue background */ ... /* Create the indicator (the dot/circle - hidden when not checked) */

How To Create a Custom Radio Button display: block; position: relative; padding-left: 35px; ... position: absolute; opacity: 0; cursor: pointer; ... position: absolute; top: 0; left: 0; ... background-color: #ccc; background-color: #2196F3; content: ""; position: absolute; display: none; display: block; top: 9px; left: 9px;

Solution with the CSS :checked pseudo-class After that, you can style the selected <label> element differently. Use the CSS :checked pseudo-class and the adjacent sibling selector (+). This will apply to any label that directly follows a checked radio button.

With some simple and modern CSS, we can now style radio button input elements even easier. Below are three different options, each having its pros and cons. You can try out the different options in the CodePen below.