Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • custom checkbox and radio button using pure css

    • 0
    • 2
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 2.65k
    Comment on it

    Hi all,

    Here is an example of custom radio button and check box using pure css.
    I hope it will helps you.

    CSS :-

    **/*Radio button*/
    .radio, .checkbox{display: inline-block;}
    .radio { padding:5px; margin-left:40px; }
    .radio input[type="radio"] { opacity: 0; position: absolute; cursor:pointer;}
    .radio input[type="radio"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
    .radio input[type="radio"]:checked + label > mark:before { content:' '; background:#0d7fbe; width:12px; height:12px; display:inline-block; margin:4px; border-radius:20px;}
    .radio input[type="radio"] + label > mark { display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:15px; border:1px solid #009df5; background:#fff; text-indent: 0; }
    /*Radio button*/
    /*Check box*/
    .checkbox { padding:5px; margin-left:40px; }
    .checkbox input[type="checkbox"] { opacity: 0; position: absolute; }
    .checkbox input[type="checkbox"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
    .checkbox input[type="checkbox"] + label > mark { position:relative; display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:5px; border:1px solid #009df5; background:#fff; text-indent: 0; }
    .checkbox input[type="checkbox"]:checked + label > mark:before {background: #0d7fbe;content: " ";height: 4px;left: 4px;position: absolute;top: 10px;transform: rotate(45deg);width: 8px;}
    .checkbox input[type="checkbox"]:checked + label > mark:after {  background: #0d7fbe;content: " ";height: 11px;left: 11px;position: absolute;top: 5px;transform: rotate(45deg);width: 4px;}
    /*Check box*/**

    HTML : -

    <div class="radio">
          <input type="radio" name="id" id="id_0" value="x">
          <label for="id_0"><mark></mark> Yes</label>
        <div class="radio">
          <input type="radio" name="id" id="id_1" value="y">
          <label for="id_1"><mark></mark> No</label>
        <div class="checkbox">
          <input type="checkbox" name="checkThis" id="checkThis" value="checkThis" checked>
          <label for="checkThis"><mark></mark> Yes</label>
        <div class="checkbox">
          <input type="checkbox" name="checkThis2" id="checkThis2" value="checkThis2">
          <label for="checkThis2"><mark></mark> No</label>

    Output :-

 0 Comment(s)

Sign In

Sign up using

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: