Приветствую знатоков.
Стилизую
checkbox и добавляю к нему изображение галочки в
before через background-image: url(…). После в DevTools во вкладке network вижу, что при каждом изменении или просто наведении на checkbox заново загружается эта картинка из memory cache.
Такого не происходит при первоначальной загрузке страницы, когда файл css кэшируется (аналогично с функцией Disable cache в DevTools). При последующих загрузках страницы для каждого checkbox загружается одна и та же картинка из памяти.
С чем это связано и можно ли это исправить в моём случае?
Все необходимые материалы прилагаю.
Ссылка на сайт с данной проблемой:
https://funtikovlab.site/test/index.html.
Скриншот данной проблемы:
Сам CSS код:
input[type="checkbox"] {
--size: 50px;
outline: none;
appearance: none;
width: var(--size);
height: var(--size);
box-shadow: 0px 0px 0px 2px rgb(175, 175, 175);
background-color: rgb(255, 255, 255);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
width: var(--size);
height: var(--size);
background: url("check.png");
background-size: 90% 90%;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
}
input[type="checkbox"]:hover {
box-shadow: 0px 0px 0px 2px rgb(77, 66, 224);
}
input[type="checkbox"]:checked {
box-shadow: 0px 0px 0px 2px rgb(77, 66, 224);
background-color: rgb(50, 132, 255);
}
input[type="checkbox"]:checked::before {
opacity: 1;
}
Простой
