[分享]css中小方框内打对勾

在CSS中，我们常常会遇到需要在小方框内打对勾的情况。这个小方框内打对勾的功能在表单中经常使用，用于表示某个选项被选中了。下面我们来看一下如何实现这个小方框内打对勾的效果。input { displa...

在CSS中，我们常常会遇到需要在小方框内打对勾的情况。这个小方框内打对勾的功能在表单中经常使用，用于表示某个选项被选中了。下面我们来看一下如何实现这个小方框内打对勾的效果。

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #bbb;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
}

input[type="checkbox"] + label:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #bbb;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

input[type="checkbox"]:checked + label:before {
    content: '\2713';
    color: #fff;
    background-color: #bbb;
    font-size: 12px;
    margin-right: 5px;
} 

代码中，我们首先将input的样式设置为display: none;，这样就不会显示复选框了。然后，我们给label添加一些样式，将其设置为inline-block，定义宽度、高度、背景色等。接着，在label:before中定义一个灰色的小方框，并添加一个margin-right将它与label中的文字分开。

在input:checked + label:before中，我们设置content为'\\2713'，这个代码表示Unicode中的对勾符号，将其与其他样式一起使用就可以实现小方框内打对勾的效果了。