CSS: пользовательский флажок не работает

Question

Я поменял свои флажки с помощью css, он работает в Chrome, но не в i.e и в 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 в положение относительно привязки скрытого флажка.