Блог

Главная - Вопросы по программированию - Изменение цвета фона активного селектора ввода

Изменение цвета фона активного селектора ввода

#html #css #input #submit

#HTML #css #ввод #Отправить

Вопрос:

Любая причина, почему, когда я запускаю этот код,

 input[type=submit]:active {
  background-color: green;
}

когда я нажимаю нужную кнопку, она мигает зеленым только на долю секунды, а затем возвращается к исходному цвету? Как я могу сохранить его постоянно зеленым?

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

1. С помощью Javascript. Применить класс при нажатии на него. :active делает именно то, что должен. Применяется только при удержании нажатой кнопки мыши.

2. developer.mozilla.org/de/docs/Web/CSS/:focus это то, чего ты хочешь

3. Потому active что состояние длится всего долю секунды. Используйте JS и измените css по щелчку

4. developer.mozilla.org/en/docs/Web/CSS/:focus — Английская версия

5. О, и :focus будет применяться только до тех пор, пока вы не нажмете на что-то еще.

Ответ №1:

 input[type=submit]:focus {
    background-color: green;
}

попробуйте это

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

1. рад помочь 🙂

2. но обратите внимание, что при отключении фокуса пользователя (например, щелчок снаружи) селектор фокуса исчезнет, а цвет по умолчанию вернется. Если вы хотите эту переменную, вы должны создать класс для background-color и добавить его onclick с помощью js. Вы можете добавить attr для ввода onclick="this.style.backgroundColor = '#000'" , если вы не знакомы с js

3. можете ли вы объяснить это немного подробнее, поскольку это мой следующий вопрос.. Я использую reactjs для этого

4. <input type="submit" onclick="this.style.backgroundColor = '#000'"> с react все должно быть в порядке, потому что это чистое решение js

5. нет лучшего способа? У меня уже есть метод, вызываемый функцией onClick

Ответ №2:

Вам также необходимо использовать :focus селектор.

Затем это добавляет цвет фона к вводу, поскольку он является сфокусированным элементом.

 input[type=submit]:active, input[type=submit]:focus {
  background-color: green;
}  
 <input type="submit" />

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

1. Следует отметить, что :focus это не является постоянным . Это длится только до тех пор, пока не будет нажат что-то еще.

2. @Paulie_D Я надеюсь, что объяснение того, что он добавляет его к сфокусированному элементу, будет понятным