Как сделать ввод флажки с градиентной границей? ⇐ CSS

[Anonymous]

Я сделал причудливый пользовательский флажок, который анимирует градиент внедорожным, когда (ООН) проверяется. Как я могу сделать границу флажок градиентом? Однако эти методы: < /p>

Кажется, не работают хорошо с входами в флажок (например, интеграция с входной контур фокус.) Class = "Snippet-Code">

Код: Выделить всё

/*Based on: https://moderncss.dev/pure-css-custom-checkbox-style/ */

input[type='checkbox'] {
appearance: none;
background-color: #fff !important;

display: inline-grid;
place-content: center;

color: purple;
border-color: purple;
}

input[type='checkbox']::before {
content: '';
width: inherit;
height: inherit;
border-radius: inherit;

transform: scale(0);
transition: 500ms transform ease-in-out;

background: purple;
}

input[type='checkbox']:checked::before {
transform: scale(1);
transition: 500ms transform ease-in-out;
background: purple;
}

input[type='checkbox'].gradient-bg::before {
background: linear-gradient(45deg, blue 20%, red 80%);
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ent-border