over 8 years ago
Use of Custom Radio Buttons
Custom radio buttons are used to style radio buttons by the use of CSS properties by applying background-color and border-color.
HTML:
<div class="radioButtons "><label for="veryurgent"><input type="radio" value="Very Urgent" name="animal" id="veryurgent"><span class="circ"><span class="dot"></span></span>Very Urgent</label><label for="Urgent"><input type="radio" value="Urgent" name="animal" id="Urgent"><span class="circ"><span class="dot"></span></span>Urgent</label><label for="NotUrgent"><input type="radio" value="Not so urgent" name="animal" id="NotUrgent"><span class="circ"><span class="dot"></span></span>Not so urgent</label></div>
<div class="radioButtons ">
<label for="veryurgent">
<input type="radio" value="Very Urgent" name="animal" id="veryurgent">
<span class="circ"><span class="dot"></span></span>
Very Urgent
</label>
<label for="Urgent">
<input type="radio" value="Urgent" name="animal" id="Urgent">
<span class="circ"><span class="dot"></span></span>
Urgent
</label>
<label for="NotUrgent">
<input type="radio" value="Not so urgent" name="animal" id="NotUrgent">
<span class="circ"><span class="dot"></span></span>
Not so urgent
</label>
</div>
CSS:
label {color: #656565; /* text-color */font-size: 15px;font-weight: normal;padding-left: 0;padding-right: 0;text-align: left;}label input[type="radio"] {left: -9001px;position: absolute;}.radioButtons .circ {border: 2px solid #c7c7c7; /* border color */border-radius: 50%; /* for circular border */display: inline-block; /* correctly aligns circular borderheight: 20px; /* height of border */position: relative; /* positions circular dot inside border */top: 1px;width: 20px; /* width of border */}.radioButtons label input[type="radio"]:checked ~ .circ .dot {background-color: #5c5e5d;}.radioButtons .circ .dot {border-radius: 50%;/* for circular dot */height: 10px; /* height of dot */left: 3px;position: absolute;/*it makes circular dot visible inside circle */top: 3px;width: 10px; /* width of dot */}
label {
color: #656565; /* text-color */
font-size: 15px;
font-weight: normal;
padding-left: 0;
padding-right: 0;
text-align: left;
}
label input[type="radio"] {
left: -9001px;
position: absolute;
}
.radioButtons .circ {
border: 2px solid #c7c7c7; /* border color */
border-radius: 50%; /* for circular border */
display: inline-block; /* correctly aligns circular border
height: 20px; /* height of border */
position: relative; /* positions circular dot inside border */
top: 1px;
width: 20px; /* width of border */
}
.radioButtons label input[type="radio"]:checked ~ .circ .dot {
background-color: #5c5e5d;
}
.radioButtons .circ .dot {
border-radius: 50%;/* for circular dot */
height: 10px; /* height of dot */
left: 3px;
position: absolute;/*it makes circular dot visible inside circle */
top: 3px;
width: 10px; /* width of dot */
}
0 Comment(s)