Answers for "change checkbox background color css"

CSS
4

how to change checkbox checked color in css

input[type="checkbox"]:checked + label::after {
       content: '';
       position: absolute;
       width: 1.2ex;
       height: 0.4ex;
       background: rgba(0, 0, 0, 0);
       top: 0.9ex;
       left: 0.4ex;
       border: 3px solid blue;
       border-top: none;
       border-right: none;
       -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
       transform: rotate(-45deg);
    }

    input[type="checkbox"] {
       line-height: 2.1ex;
    }

    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: -999em;
    }

    input[type="checkbox"] + label {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    input[type="checkbox"] + label::before {
       content: "";
       display: inline-block;
       vertical-align: -25%;
       height: 2ex;
       width: 2ex;
       background-color: white;
       border: 1px solid rgb(166, 166, 166);
       border-radius: 4px;
       box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
       margin-right: 0.5em;
    }
Posted by: Guest on May-27-2021
0

radio button css design for registration page

<!DOCTYPE html>
<html>
<head>

<style>
    input[type = checkbox]{
          -webkit-appearance: none;
          background-color: #fafafa;
          border: 1px solid #cacece;
          box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
          padding: 9px;
          border-radius: 3px;
          display: inline-block;
          position: relative;    
    }

    input[type = checkbox]:checked {
        background-color: #e9ecee;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }


</style>
</head>

<body>

<form>
  <input type="checkbox" name="gender" value="male" checked> Male<br>
  <input type="checkbox" name="gender" value="female"> Female<br>
  <input type="checkbox" name="gender" value="other"> Other  
</form> 

</body>
</html>
Posted by: Guest on December-03-2020

Code answers related to "change checkbox background color css"

Browse Popular Code Answers by Language