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>

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 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 */
}