Я создал пользовательский флажок, используя псевдоэлемент :: before для метки, как и должно быть.Затем я понял, что на самом деле он должен иметь флажок в спецификации проекта, и поэтому я добавил его в атрибут содержимого.Через постпроцессор он был закодирован как base64.Он очень хорошо работает в Firefox - к сожалению, в Chrome он вообще не отображается
Ожидаемый результат (скриншот из Firefox):
Что мы получаем:
После некоторой путаницы кажется, что все дело в том, что псевдоэлемент :: before отображается как flex (но таким образом я могу расположить его правильно).
У вас есть идеи, почему это так работает - или как я могу обойти это?
Минимальный рабочий пример: https://codepen.io/anon/pen/zmyEpo?editors=1111
HTML:
<div class="checkbox">
<input type="checkbox" name="" id="" class="checkbox__input">
<label class="checkbox__label">Label</label>
</div>
CSS:
.checkbox__label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.checkbox__label::before {
content: '';
width: .8em;
height: .8em;
border: 3px solid;
margin-right: .5em;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: .3em;
border-radius: 50%;
box-shadow: inset 0 0 0 2em #000;
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+);
}
.checkbox__input {
display: none;
}
Редактировать: SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FFF" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>