Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Custom Radio Buttons

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 161
    Comment on it

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

     

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: