Question

我在css的帮助下更改了我的复选框，它在Chrome中有效，但在IE和Edge中无效。因此，我找到了以下引用：ref

这是我的代码：

.checkbox-style {
   display: none;
}

.checkbox-style + label {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #C0C5C9;
    content: "";
    background: #FFF;
    align-items: center;
}

.checkbox-style[type="checkbox"]:checked + label:before {
    font-family: 'FontAwesome' !important;
    content: "\f00c";
    border: none;
    color: #015CDA;
    font-size: 12px;
    -webkit-text-stroke: medium #FFF;
    margin-left: -11px;
}

这是html：

<span class="checkbox-wrapper" role="presentation"> <input type="checkbox" class="checkbox-style"><label></label></span>

该复选框的显示方式与我想要的一样，但是当我单击该复选框时，未创建标签的：before。因此，我的复选框不可检查。为什么？

Answer 1

由于您拥有display:none;，因此无法选中您的复选框。自定义复选框的常见策略是隐藏该复选框（例如可能具有不透明性或可见性），然后将其置于“假”复选框上方。

所以您可以尝试这样的事情：

body {
    padding: 50px;
}

.checkbox-wrapper {
    position: relative;
}

.checkbox-style {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
 }

        .checkbox-style + label {      
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid #C0C5C9;
            background: #FFF;
            line-height: 14px;
            text-align: center;
        }

        .checkbox-style[type="checkbox"]:checked + label:before {
            font-family: 'FontAwesome' !important;
            content: "\f00c";
            border: none;
            color: #015CDA;
            font-size: 12px;
            -webkit-text-stroke: medium #FFF;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="checkbox-wrapper" role="presentation"> <input type="checkbox" class="checkbox-style"><label></label></span>

我通过隐藏不透明复选框并将其绝对定位在标签上来更新了CSS。

我从标签中删除了content: ""，因为它仅适用于:before和:after样式，align-items: center;因为仅适用于flexbox显示，并且您的标签是块状的。然后，我将其行高设置为等于其高度（14px），并将text-align: center设置为选中标记图标的中心。

我还将checkbox-wrapper设置为相对于其隐藏的复选框固定的位置。

CSS：自定义复选框不起作用

1 个答案: