Растолкуйте запись css для кастомного чекбокса

Question

Растолкуйте запись css для кастомного чекбокса

☀︎Питруха☀︎ Мастер (1864), закрыт 2 недели назад

.custom-checkbox:checked + label::before {
border-color: blue;
background-color: blue;
background-image: url("data:image/svg+xml,%3csvg xmlns=' http://www.w3.org/2000/svg ' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

Answer 1

ewe 2e¶ CoЛнЫшКоcBeTиТоЧеНЬяРкО* Высший разум (311452) 1 месяц назад

Окантовочка синенькая.
Фон тоже синий.
На фоне так же картинка в svg-формате, скорее всего сам чекбокс.

☀︎Питруха☀︎Мастер (1864) 1 месяц назад

а что картинка в таком формате? как его читать?

ewe 2e¶ CoЛнЫшКоcBeTиТоЧеНЬяРкО* Высший разум (311452) ☀︎Питруха☀︎, вот такая картинка:

☀︎Питруха☀︎Мастер (1864) 1 месяц назад

это то понятно мне нужно толкование записи background-image: ...... вот этого всего

ewe 2e¶ CoЛнЫшКоcBeTиТоЧеНЬяРкО* Высший разум (311452) ☀︎Питруха☀︎, там картинка, указан ее адрес, откуда брать. Этот адрес бывает четырех типов: an absolute URL, a relative URL, a blob URL, or a data URL.

 https://developer.mozilla.org/en-US/docs/Web/CSS/url

Тут видимо data URL, внутренности картинки вписаны прям в адресе.

Answer 2

Сам оригинальный чекбокс невидим, но используется его встроенный аттрибут "checked", вместо оригинального чекбокса отрисовывается псевдоэлемент в виде svg картинки, в зависимости от наличия аттрибута "checked" отображается разный svg, например с галочкой и без галочки...