我的解决方案

input[type="checkbox"] { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background: lightgray; height: 16px; width: 16px; border: 1px solid white; } input[type="checkbox"]:checked { background: #2aa1c0; } input[type="checkbox"]:hover { filter: brightness(90%); } input[type="checkbox"]:disabled { background: #e6e6e6; opacity: 0.6; pointer-events: none; } input[type="checkbox"]:after { content: ''; position: relative; left: 40%; top: 20%; width: 15%; height: 40%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); display: none; } input[type="checkbox"]:checked:after { display: block; } input[type="checkbox"]:disabled:after { border-color: #7b7b7b; } <input type="checkbox"><br> <input type="checkbox" checked><br> <input type="checkbox" disabled><br> <input type="checkbox" disabled checked><br>

这是最简单的方法，你可以选择哪个复选框来提供这种样式。

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

警告:在撰写本文时，以下内容是正确的，但与此同时，事情有了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框，所以没有办法对它们进行样式化。

我认为最简单的方法是通过样式化标签并使复选框不可见。

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

复选框，即使它是隐藏的，仍然是可访问的，它的值将在提交表单时发送。对于旧的浏览器，您可能必须使用JavaScript将标签的类更改为checked，因为我认为旧版本的Internet Explorer不理解复选框上的::checked。

这是一个现代版本，有一点动画，和简单的样式，你可以自定义:

.checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: transparent;
    border: 2px solid #7C7A7D;
    border-radius: 5px;
    margin: 0;
    outline: none;
    transition: 0.5s ease;
    opacity: 0.8;
    cursor: pointer;
}


.checkbox:checked {
    border-color: #7C7A7D;
    background-color: #7C7A7D;
}


.checkbox:checked:before {
   position: absolute;
   left: 2px;
   top: -4px;
   display: block;
   content: '\2713';
   text-align: center;
   color: #FFF;
   font-family: Arial;
   font-size: 14px;
   font-weight: 800;
}


.checkbox:hover {
   opacity: 1.0;
   transform: scale(1.05);
}

自定义复选框与CSS (WebKit浏览器解决方案仅Chrome, Safari，移动浏览器)

<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
<label for="cardAccptance" class="bold"> Save Card for Future Use</label>

CSS:

    /* The checkbox-cu */
    
    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    
    /* Hide the browser's default checkbox-cu */
    
    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    
    /* Create a custom checkbox-cu */
    
    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }
    
    
    /* On mouse-over, add a grey background color */
    
    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }
    
    
    /* When the checkbox-cu is checked, add a blue background */
    
    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }
    
    
    /* Create the checkmark/indicator (hidden when not checked) */
    
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    
    /* Show the checkmark when checked */
    
    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }
    
    
    /* Style the checkmark/indicator */
    
    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }