Sitemap / Advertise

Information



Tags



Share

How to customize rounded input radio buttons in CSS

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement




Definition

In this tutorial, I will show you how to customize the form input radio buttons if you do not want to use the antiquated default browser style in your projects :)

Syntax(1):

The <input type="radio"> defines a radio button.

Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group. You can have as many radio groups on a page as you want, as long as each group has its own name.

Note: The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.

Code

📄 Create the div element named container.

📄 Design the parent label using margin and padding properties.

📄 Hide all input elements in the parent label.

📄 Design the span element as the selection indicator for buttons.

📄 Create the confirmation circle (inner) using the after pseudo-selector.

📄 Change the color scheme while hovering.

📄 Show the confirmation circle when a radio button is checked by the user, using the checked selector and the tilde selector (~).

📄 In HTML, define the radio button group and options for your form, as depicted for car brands below:


-------------- CSS --------------

.container{position:relative;background-color:#1F2020;width:250px;margin:auto;}
.container p{color:#A5282C;}
.container input[type="radio"]{position:absolute;display:block;height:0;width:0;user-select:none;}
.container label{position:relative;display:block;font-size:20px;font-weight:bold;padding-left:50px;margin-left:40px;margin-top:30px;color:#F3D060;cursor:pointer;}
.container span{position:absolute;top:-8px;left:0;height:40px;width:40px;border-radius:50%;background-color:#A5282C;margin-right:10px;}
.container span:after{content:'';position:absolute;top:10px;left:10px;width:20px;height:20px;border-radius:50%;background-color:#EE7762;}
.container label:hover span{background-color:#F3D060;}
.container input[type="radio"]:checked ~ span{background-color:#F3D060;} 
.container input[type="radio"]:checked ~ span:after{background-color:#5EB0E5;} 

-------------- HTML --------------

<div class="container">
<br>
<p>Select a car brand:</p>
<label><input type="radio" name="option" value="Lexus"/><span></span> Lexus</label>
<label><input type="radio" name="option" value="Porsche"/><span></span> Porsche</label>
<label><input type="radio" name="option" value="Lincoln"/><span></span> Lincoln</label>
<label><input type="radio" name="option" value="Toyota"/><span></span> Toyota</label>
<label><input type="radio" name="option" value="Mercedes-Benz"/><span></span> Mercedes-Benz</label>
<label><input type="radio" name="option" value="Kia"/><span></span> Kia</label>
<label><input type="radio" name="option" value="Buick"/><span></span> Buick</label>
<label><input type="radio" name="option" value="BMW"/><span></span> BMW</label>
<label><input type="radio" name="option" value="Honda"/><span></span> Honda</label>
<label><input type="radio" name="option" value="Chevrolet"/><span></span> Chevrolet</label>
<label><input type="radio" name="option" value="Hyundai"/><span></span> Hyundai</label>
<label><input type="radio" name="option" value="Nissan"/><span></span> Nissan</label>
<br><br>
</div>

Result:


Select a car brand:



References

(1) https://www.w3schools.com/tags/att_input_type_radio.asp