This article mainly realizes how to customize the custom style of CheckBox through CSS.

In the process of project development, it is inevitable to encounter the problem of custom CheckBox style. The original CheckBox style is really difficult to meet the increasingly high aesthetic standards of modern people. Today, in the development process of the project, we have encountered this problem, simply record the code directly, which is convenient for subsequent use.

First, the html code is as follows:

<div class="box-list">
	<div class="opt">
		<input class="magic-checkbox" type="checkbox" name="layout" id="c1">
		<label for="c1">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c2">
		<label for="c2">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c3">
		<label for="c3">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c4">
		<label for="c4">Normal</label>
	</div>
</div>

Next is CSS code:

/*--Related radio check buttons--*/
@keyframes hover-color {       /**Check box or radio box border hover**/
  from {
    border-color: #c0c0c0; }
  to {
    border-color: #29A176; } }

.magic-radio,
.magic-checkbox {           /**You have to hide or cut the radio and checkbox**/
  position: absolute;
  display: none; }

.magic-radio[disabled],           /**radio   checkbox   Mouse pointer when specifying the disabled HTML property**/
.magic-checkbox[disabled] {
  cursor: not-allowed; }

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: block;
  padding-left: 25px;
  cursor: pointer;
  vertical-align: middle;
  }
  .magic-radio + label:hover:before,     /*hover frame animation of mineral processing  */
  .magic-checkbox + label:hover:before {
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-name: hover-color; }
  .magic-radio + label:before,
  .magic-checkbox + label:before {/*Use before to simulate the selection box*/
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: '';
    border: 1px solid #c0c0c0; }
  .magic-radio + label:after,
  .magic-checkbox + label:after {/*Use after to simulate that the check mark or circle point of the check box is hidden first by default*/
    position: absolute;
    display: none;
    content: '';
    }

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {/*Appearance when marquee is disabled*/
  cursor: not-allowed;
  color: #e4e4e4;
  }
  .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
  .magic-checkbox[disabled] + label:hover,
  .magic-checkbox[disabled] + label:before,
  .magic-checkbox[disabled] + label:after {
    cursor: not-allowed; }/*Pointer when disabled*/
  .magic-radio[disabled] + label:hover:before,
  .magic-checkbox[disabled] + label:hover:before {
    border: 1px solid #e4e4e4;
    animation-name: none; }/*Box and fill when disabled*/
  .magic-radio[disabled] + label:before,
  .magic-checkbox[disabled] + label:before {
    border-color: #e4e4e4; }

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
  animation-name: none; }/*Remove hover animation when check box is selected*/

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {/*Show after fill when check box is selected*/
  display: block;
  }

.magic-radio + label:before {/*radio The check box of should be a circle*/
  border-radius: 50%; }

.magic-radio + label:after {/*Simulate the Circle filling of radio*/
  top: 7px;
  left: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #29A176; }

.magic-radio:checked + label:before {
  border: 1px solid #29A176; }

.magic-radio:checked[disabled] + label:before {
  border: 1px solid #c9e2f9; }

.magic-radio:checked[disabled] + label:after {
  background: #c9e2f9; }

.magic-checkbox + label:before {
  border-radius: 3px; }

.magic-checkbox + label:after {/*Simulate the check mark filling of the check box*/
  top: 2px;
  left: 7px;
  box-sizing: border-box;
  width: 6px;
  height: 12px;
  transform: rotate(45deg);
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-top: 0;
  border-left: 0; }

.magic-checkbox:checked + label:before {
  border: #29A176;
  background: #29A176; }

.magic-checkbox:checked[disabled] + label:before {
  border: #c9e2f9;
  background: #c9e2f9; }

The layout of HTML files must be used according to the above file layout. If you want to customize other styles, you only need to modify some of them.