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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 177
    Comment on it

    Hello all, In this blog today, I am going to show u how with the help of CSS, We can easily create custom checkbox and radio buttons. Following is the HTML and CSS code, which shows how to create your own checkbox and radio button. 

    HTML :-

    <div class="mainContainer">
        <div class="checkboxContainer">
            <input type="checkbox" id="check1" name="options" />
            <label for="check1">Option 1</label>
            <input type="checkbox" id="check2" name="options" />
            <label for="check2">Option 2</label>
            <input type="checkbox" id="check3" name="options" />
            <label for="check3">Option 3</label>
            <input type="checkbox" id="check4" name="options" />
            <label for="check4">Option 4</label>
        </div>
        <div class="radioContainer">
            <input type="radio" id="radio1" name="type" />
            <label for="radio1">Type 1</label>
            <input type="radio" id="radio2" name="type" />
            <label for="radio2">Type 2</label>
            <input type="radio" id="radio3" name="type" />
            <label for="radio3">Type 3</label>
            <input type="radio" id="radio4" name="type" />
            <label for="radio4">Type 4</label>
        </div>
    </div>

    CSS :- Normally default Checkbok and radio button doesn't have any styling, the simple checkbox has checked sign in it and radio button has dotted sign when selected but, If we want to create custom Checkbox and Radio buttons , we can also add our own styling for better look for these two as shown :- 

    body {
        font: normal 12px/1 Arial,helvetica,sans-serif;
        color: #333;
        background: #eee;
    }
    .mainContainer {
        width: 360px;
        height: 104px;
        position: absolute;
        margin-left: -180px;
        left: 50%;
        top: 20%;
        background: #fff;
        padding: 30px 30px 0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 1px #ddd;
        -moz-box-shadow: 0 1px 1px #ddd;
        box-shadow: 0 1px 1px #ddd;
    }
    .checkboxContainer, .radioContainer {
        margin-bottom: 30px;
    }
    /* RADIO */
    input[type='radio'] {
        display: none;
    }
    input[type='radio'] + label {
        margin-right: 20px;
        position: relative;
        cursor: pointer;
    }
    input[type='radio'] + label:before {
        content: '';
        cursor: pointer;
        display: inline-block;
        position: relative;
        width: 16px;
        height: 16px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background: #eee;
        margin-right: 5px;
        top: 4px;
    }
    input[type='radio']:checked + label:before {
        background-color: #aaa; 
    }
    input[type='radio']:checked + label:after {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        position: absolute;
        left: 4px;
        top: 4px;
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #fff;
        content: '';
    }
    input[type='checkbox'] {
        display: none;
    }
    input[type='checkbox'] + label {
        position: relative;
        margin-right: 20px;
        cursor: pointer;
    }
    input[type='checkbox'] + label:before {
        content: '';
        display: inline-block;
        cursor: pointer;
        width: 16px;
        height: 16px;
        background: #eee;
        position: relative;
        top: 4px;
        margin-right: 5px;
    }
    input[type='checkbox']:checked + label:before {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
        background-color: #aaa;
    }
    input[type='checkbox']:checked + label:after {
        content: '';
        width: 10px;
        height: 10px;
        display: inline-block;
        background: #fff;
        position: absolute;
        left: 3px;
        top: 3px;
    }

    Following is the given link which shows the output of how to create custom checkbox and radio buttons :-

     https://jsfiddle.net/eucam7jh/

 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: