Страницы

Поиск по вопросам

четверг, 20 декабря 2018 г.

CSS. Измененить цвет при нажатии и сохранить изменённое значение

/* Элемент меняет цвет при наведении на него */ button.yt-icon-button:hover { vertical-align: middle; color: #ff0087; }
/* Элемент меняет цвет во время нажатия на доли секунд. */ button.yt-icon-button:active { vertical-align: middle; color: #01a715;
/* Элемент меняет цвет после нажатия, но стоит потом куда-то кликнуть и изменённый цвет заменяется на цвет по умолчанию. */ button.yt-icon-button:focus { vertical-align: middle; color: #01a715; }
Как сделать так, чтобы при клике изменялся цвет элемента и не изменялся на дефолт при клике на другое место.

Попробовала добавить код от Vadizar.
Получается вот так:

Но когда я добавляю нижнее, так как мне не нужно изменение фона. Я с фоном не работаю :
button { color: #ff9000 !important; transition: color 9999999s }
button:active { color: green; transition: color 0s }
у меня "палец вверх" не становится зелёным. Почему ?
И ещё:
Почему подсветка кода от Vadizar такая:

слово background выделяется зелёным
А при моём (скорей всего неправильном) варианте такая:

слово color не выделяется зелёным
И почему в конец после transition не добавляется ?


Ответ

Решение на чистом CSS без хаков с input: button { color: #fff; background: #000; padding: 1.2rem 2rem; cursor: pointer; user-select: none; border: none; outline: none; transition: background 9999999s; } button:active { background: red; transition: background 0s; }
Я не настаиваю на том, что это верный подход, и полностью согласен с решением St1myL. Тем не менее, данный пример показывает, на что способен CSS при извращенном воображении и может быть полезен в некоторых случаях, когда невозможно использовать JS и не подходит метод с input

Комментариев нет:

Отправить комментарий