1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to Customize Checkbox Using CSS?

Discussion in 'Web Design, HTML And CSS' started by Ashish Bisht, Oct 21, 2016.

  1. Ashish Bisht

    Ashish Bisht New Member

    Joined:
    Aug 4, 2016
    Messages:
    13
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Hi friends , Being a developer I am learning html, CSS, php & web Development. I am here to enhance my learning on web development through various forums like html developer forum and other web developer communities & want to customize checkbox with the help of CSS. Mostly developers use javascript for customizing the look of the checkboxes but I want to use CSS. I hope any tech developer can help me over here in resolving the issue.
     
  2. Ami Desai

    Ami Desai Member

    Joined:
    Jan 5, 2017
    Messages:
    42
    Likes Received:
    17
    Trophy Points:
    8
    Location:
    Ahmedabad
    Home Page:
    HI,

    You can use following type of CSS

    Code:
    input[type=checkbox] {
    display: none;
    }
    .checkbox label:before {
    border-radius: 3px;
    }
    input[type=checkbox]:checked + label:before {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 15px;
    }

    Thanks
     
    Last edited: Jan 10, 2017
    shabbir likes this.
  3. persysweb

    persysweb Member

    Joined:
    Aug 1, 2017
    Messages:
    76
    Likes Received:
    13
    Trophy Points:
    8
    Location:
    India
    Home Page:
    You can use this following type of CSS also:
    Code:
    [type="checkbox"]:not:)checked),
    [type="checkbox"]:checked {
      position: absolute;
      left: -9999px;
    }
    [type="checkbox"]:not:)checked) + label,
    [type="checkbox"]:checked + label {
      position: relative;
      padding-left: 1.95em;
      cursor: pointer;
    }
    
    /* checkbox aspect */
    [type="checkbox"]:not:)checked) + label:before,
    [type="checkbox"]:checked + label:before {
      content: '';
      position: absolute;
      left: 0; top: 0;
      width: 1.25em; height: 1.25em;
      border: 2px solid #ccc;
      background: #fff;
      border-radius: 4px;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    }
    /* checked mark aspect */
    [type="checkbox"]:not:)checked) + label:after,
    [type="checkbox"]:checked + label:after {
      content: '✔';
      position: absolute;
      top: .1em; left: .3em;
      font-size: 1.3em;
      line-height: 0.8;
      color: #09ad7e;
      transition: all .2s;
    }
    /* checked mark aspect changes */
    [type="checkbox"]:not:)checked) + label:after {
      opacity: 0;
      transform: scale(0);
    }
    [type="checkbox"]:checked + label:after {
      opacity: 1;
      transform: scale(1);
    }
    /* disabled checkbox */
    [type="checkbox"]:disabled:not:)checked) + label:before,
    [type="checkbox"]:disabled:checked + label:before {
      box-shadow: none;
      border-color: #bbb;
      background-color: #ddd;
    }
    [type="checkbox"]:disabled:checked + label:after {
      color: #999;
    }
    [type="checkbox"]:disabled + label {
      color: #aaa;
    }
    /* accessibility */
    [type="checkbox"]:checked:focus + label:before,
    [type="checkbox"]:not:)checked):focus + label:before {
      border: 2px dotted blue;
    }
    
    /* hover style just for information */
    label:hover:before {
      border: 2px solid #4778d9!important;
    }
    
    /* Useless styles, just for demo design */
    
    body {
      font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
      color: #777;
    }
    h1, h2 {
      margin-bottom: .25em;
      font-weight: normal;
      text-align: center;
    }
    h2 {
      margin: .25em 0 2em;
      color: #aaa;
    }
    form {
      width: 7em;
      margin: 0 auto;
    }
    .txtcenter {
      margin-top: 4em;
      font-size: .9em;
      text-align: center;
      color: #aaa;
    }
    .copy {
     margin-top: 2em;
    }
    .copy a {
     text-decoration: none;
     color: #4778d9;
    }
     

Share This Page