#html #css #google-chrome
Вопрос:
У меня в файле module.css есть класс, который выглядит следующим образом
.field input[type='date']:in-range::-webkit-datetime-edit-year-field { color: transparent; } Это работает, когда ввод не отключен. Цвет гггг установлен на прозрачный.
Когда ввод отключен, цвет возвращается к цвету по умолчанию, установленному в Google Chrome для этого поля.
Вот что я безуспешно пытался сделать:
.field input:disabled[type='date']:in-range::-webkit-datetime-edit-year-field { color: transparent; } .field input[type='date']:disabled:in-range::-webkit-datetime-edit-year-field { color: transparent; } .field input[type='date']:in-range::-webkit-datetime-edit-year-field:disabled { color: transparent; } Как я могу настроить таргетинг на поле дата-время-редактирование-год, если ввод отключен?
Ответ №1:
Попробуй это. Если поле отключено, диапазон не имеет значения.
input[type='date']:disabled::-webkit-datetime-edit-year-field { color: transparent; } Комментарии:
1. Это лучше, чем мое решение, так как в нем используется на один селектор меньше. Спасибо вам за ваш вклад!
Ответ №2:
Я нашел ответ на свой вопрос после некоторых проб и ошибок. Сначала решение не было очевидным, и оно было найдено путем размещения селектора :отключено в случайных местах, пока он не заработал должным образом.
.field input[type='date']:disabled::-webkit-datetime-edit-year-field { color: transparent; } .field input[type='date']:disabled::-webkit-datetime-edit-month-field { color: transparent; } .field input[type='date']:disabled::-webkit-datetime-edit-day-field { color: transparent; } .field input[type='date']:disabled::-webkit-datetime-edit-text { color: transparent; } Для того, чтобы эти классы изменили цвет на прозрачный для этих элементов:
- Год — ГГГГ
- Месяц — ММ
- День — ДД
- Разделитель текста — /
Изменить: Удален дополнительный :отключенный селектор, как указано @Azu