Radio styles for a form

amigo-radio.html

<!--

HTML UPDATES

Where there are input values for the amigo animal type remove the JS that styleizes the radio buttons so we just have straight labels and inputs.
Make the output of the radio buttons resemble what is below. A wrapper and than label, input for that animal.

Add some new classes. I added the class amigo-type and to the wrapper div, animal-label class to the label elements inside and animal-input class to the input radio buttons.

-->

<div style="margin-top:5px" class="Field amigo-type">
    <!-- DOG AMIGO -->
    <label class="animal-label" for="radDog">Dog</label>
    <input class="animal-input" type="radio" checked="checked" name="radPetType" id="radDog" role="radio" aria-checked="true">
    <!-- CAT AMIGO -->
    <label class="animal-label" for="radCat">Cat</label>
    <input class="animal-input" type="radio" name="radPetType" id="radCat">
</div>

<style>

/* Add the following styles to a style sheet to target the new classes added to the  */
.animal-radio .animal-label {
    float: left;
    margin-right: 0;
}

.animal-radio .animal-input {
    float: left;
    margin-right: 20px;
}

</style>