Radio buttons
Used when only one option can be selected out of a couple of choices.
How to use this component
This element should be used when asking a user to make a selection, where only 1 option is allowed. If the options are more than 5 or 6, consider using the Select Field instead.
Code Resource
<label for="radContactUs" id="contactus" class="form_formLabelTitleLong">If we need to contact you, how would you prefer we do it? *</label>
<fieldset class="form_radio_holder">
<input id="radContactUs_0" type="radio" name="radContactUs" value="Email">
<label for="radContactUs_0">Email</label>
<input id="radContactUs_1" type="radio" name="radContactUs" value="Phone">
<label for="radContactUs_1">Phone</label>
<input id="radContactUs_2" type="radio" name="radContactUs" value="Post" checked="checked">
<label for="radContactUs_2">Post</label>
</fieldset>
/* radio buttons */
.form_radio_holder {
position: relative;
margin-bottom: 15px;
border: 0px;
padding: 0px;
}
.form_formLabelTitleLong {
width: 98%;
font-size: 18px;
color: black;
margin-bottom: 5px;
float: left;
text-align: left;
}
.form_formRadioButtons {
width: 100%;
display: block;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 40px;
float: left;
color: #000;
border: 0px solid silver;
}
.form_formRadioButtons td {
padding: 0px;
}
input[type="radio"] {
position: relative;
left: -10000px;
}
input[type="radio"] + label {
display: inline-block;
margin: -2px 10px 0 0;
vertical-align: middle;
cursor: pointer;
float: left;
color: black;
padding-top: 0px!important;
font-size: 20px!important;
text-align: left;
width: 100%;
}
.form_formRadioButtons label {
font-size: 12px;
margin-top: 15px;
padding: 0 10px 0 5px;
width: 100%;
}
input[type="radio"] + label:before {
background: url("https://www.cardiff.gov.uk/Style%20Library/IMAGES/radio_off.png");
width: 35px;
height: 35px;
float: left;
margin-right: 16px;
content: "";
background-size: contain;
position: relative;
top: -6px;
color: #015b66 !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type="radio"]:checked + label:before, input[type="radio"]:focus + label:before {
background: url("https://www.cardiff.gov.uk/Style%20Library/IMAGES/radio_on.png");
background-size: contain;
}
/* END */