css checkbox color code example

Example 1: color checkbox css when clicked

input[type=checkbox]:checked {
  /*CSS after CHECKED*/
  color: #ffd369;
}

Example 2: change radio button color

input[type='radio'] {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:1px solid darkgray;
  border-radius:50%;
  outline:none;
  box-shadow:0 0 5px 0px gray inset;
}

input[type='radio']:hover {
  box-shadow:0 0 5px 0px orange inset;
}

input[type='radio']:before {
  content:'';
  display:block;
  width:60%;
  height:60%;
  margin: 20% auto;    
  border-radius:50%;    
}
input[type='radio']:checked:before {
  background:green;
}

Example 3: 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;
    }

Example 4: checkbox style css

<div>
		<label>Checkbox Small</label>
		<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
		<nput type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
	</div>
	<div>
		<label>Checkbox Big</label>
		<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" />
		<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" />
	</div>
	<div>
		<label>Radio Small</label>
		<div class="button-holder">
			<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />
			<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" />
			<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" />
			<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" />
		</div>
	</div>
	<div>
		<label class="radio-1">Radio Big</label>
		<div class="button-holder">
			<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked />
			<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" />
			<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" />
		</div>
	</div>