Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to change the background color on a input checkbox with css

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 6.02k
    Comment on it

    Pseudo elements are useful for changing the background colour of the checkbox and radio buttons. We can use :before and :after to change the colour or appearance of the checkboxes. It can all work with css styling.

    Example:

    <div class="container">
      <div class="section">
        <p>
          <input type="checkbox" id="b1" name="a">
          <label for="b1">First</label>
        </p>
        <p>
          <input type="checkbox" id="b2" name="a">
          <label for="b2">Second</label>
        </p>
        <p>
          <input type="checkbox" id="b3" name="a">
          <label for="b3">Third</label>
        </p>
      </div>
    </div>
    

    CSS:

    .box {
      background: #cccccc;
      color: #fff;
      width: 350px;
      padding: 5px;
      margin: 5px auto;
    }
    p {
      margin: 5px 0;
      padding: 0;
    }
    input[type="checkbox"] {
      display: none;
    }
    label {
      cursor: pointer;
    }
    input[type="checkbox"] + label:before {
      border: 1px solid #7f83a2;
      content: "\00a0";
      display: inline-block;
      font: 16px/1em sans-serif;
      height: 16px;
      margin: 0 .25em 0 0;
      padding: 0;
      vertical-align: top;
      width: 16px;
    }
    input[type="checkbox"]:checked + label:before {
      background: #3d404e;
      color: #666;
      content: "\2713";
      text-align: center;
    }
    input[type="checkbox"]:checked + label:after {
      font-weight: bold;
    }
    

 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: