xxxxxxxxxx
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
xxxxxxxxxx
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
xxxxxxxxxx
<form>
<p>Veuillez choisir la meilleure méthode pour vous contacter :</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2"
name="contact" value="telephone">
<label for="contactChoice2">Téléphone</label>
<input type="radio" id="contactChoice3"
name="contact" value="courrier">
<label for="contactChoice3">Courrier</label>
</div>
<div>
<button type="submit">Envoyer</button>
</div>
</form>
xxxxxxxxxx
<form>
<p>Select a maintenance drone:</p>
<div>
<input type="radio" id="huey" name="drone" value="huey"
checked>
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>
</form>
<!--- If you want to be able to make several elements selectable,
the "name" attribute must be different for each of them -->
// source : https://developer.mozilla.org/
xxxxxxxxxx
<div>
<label class="radio">
<input name="radio" type="radio" checked/>
<span>Awesome</span>
</label>
<label class="radio">
<input name="radio" type="radio" />
<span>Cool</span>
</label>
</div>
xxxxxxxxxx
//Defination of radio button:
/*
In HTML, a radio button is used to select one of many given choices.
Radio buttons are shown in radio groups to show a set of related options, only one of which can be selected.
A radio button in HTML can be defined using the <input> tag.
*/
xxxxxxxxxx
html {
font-family: sans-serif;
}
div:first-of-type {
display: flex;
align-items: flex-start;
margin-bottom: 5px;
}
label {
margin-right: 15px;
line-height: 32px;
}
input {
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
}
button,
legend {
color: white;
background-color: black;
padding: 5px 10px;
border-radius: 0;
border: 0;
font-size: 14px;
}
button:hover,
button:focus {
color: #999;
}
button:active {
background-color: white;
color: black;
outline: 1px solid black;
}
xxxxxxxxxx
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="form-check-input" checked>
<label class="form-check-label" for="customRadio1">Custom radio</label>
</div>