Я создал настраиваемый элемент флажка, используя псевдоэлемент :: 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>
@TemaniAfif добавлен в редакцию
Вы можете добавить чек с помощью :before или :after, повернув его и просто раскрасив border.






Это работает, если вы добавите width и height в свой SVG:
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -50 512 512'%3E %3Cpath fill='%23FFF' 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'/%3E %3C/svg%3E");
(Кодировка изменена с Base64 на URL-кодирование для упрощения редактирования)
Обновлено перо: https://codepen.io/Sphinxxxx/pen/YJddQq
вы можете поделиться исходным SVG, который вы преобразовали в base64?