Изменить цвет фона ввода, когда пользователь нажимает - PullRequest
Новая
       8

Изменить цвет фона ввода, когда пользователь нажимает

2 голосов
/ 27 апреля 2019

Прежде всего, я думаю, что этот вопрос может иметь ответ где-то здесь на сайте и извините за повторение, но я не могу найти то, что я хочу.

Итак ... У меня есть форма с 4 входами, я хочу, чтобы кто-то нажимал на ввод, чтобы ввести значение цвета фона, который нужно изменить, и когда пользователь щелкает где-то еще, чтобы вернуть его в нормальное состояние. Если у кого-то есть несколько примеров, пожалуйста, запишите их, я хочу узнать больше о том, как работает javascript. 

 <form>
                <div>
                    <label for="name">NAME</label>
                    <input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
                </div>
                <div>
                    <label for="company">COMPANY</label>
                    <input class="input" type="text" name="company" id="company"
                        placeholder="Leave it empty if you don`t have a name">
                </div>
                <div>
                    <label for="phone">PHONE</label>
                    <input class="input"  type="text" name="phone" id="phone"
                        placeholder="Please,enter your mobile phone">
                </div>
                <div>
                    <label for="email">EMAIL</label>
                    <input class="input" type="email" name="email" id="email" placeholder="Your email address">
                </div>
                <div class="message">
                    <label for="message">MESSAGE</label>
                    <textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
                </div>
                <a href="#" class="btn btn-large">Send</a>
            </form>

1 Ответ

1 голос
/ 27 апреля 2019

Используйте :focus селектор псевдокласса , чтобы применить CSS, когда элемент находится в фокусе. 

input:focus {
  background-color: #ddd;
}
<form>
  <div>
    <label for="name">NAME</label>
    <input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
  </div>
  <div>
    <label for="company">COMPANY</label>
    <input class="input" type="text" name="company" id="company" placeholder="Leave it empty if you don`t have a name">
  </div>
  <div>
    <label for="phone">PHONE</label>
    <input class="input" type="text" name="phone" id="phone" placeholder="Please,enter your mobile phone">
  </div>
  <div>
    <label for="email">EMAIL</label>
    <input class="input" type="email" name="email" id="email" placeholder="Your email address">
  </div>
  <div class="message">
    <label for="message">MESSAGE</label>
    <textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
  </div>
  <a href="#" class="btn btn-large">Send</a>
</form>

ОБНОВЛЕНИЕ: Если вы хотите переключаться между состояниями при каждом щелчке, то вам нужно переключаться (вероятно, класс) на основепо событию клика.

...