изменение цвета фона поля ввода

Question

надеюсь, вы сможете уточнить:

Я хочу, чтобы цвет фона поля ввода был «зеленым», проблема в том, что когда я нажимаю на него, чтобы написать sth, цвет снова меняется на белый по умолчанию , вот мой код css:

  input{
            width: 100%;
            color: $white;      
            border: none;
            border-bottom: 1px solid $grey-light;
            outline: none;
            font-size: 1rem;
            margin-bottom: 1.25rem;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            background-color: $green;
        }

часть HTML React:

<form className="form">
 <input type="text" name="name" className="form__name" placeholder="Name*"/>
        
 <input type="email" name="email" className="form__email" placeholder="Email*"/>
</form>

Некоторое время я бродил по net, но ни один из ответы, кажется, решают проблему.

надеюсь, вы сможете уточнить. спасибо

Answer 1

Вы можете использовать input:focus, чтобы background green оставалось при наборе текста. Убедитесь, что у вас , а не , есть другой css, который отменяет это css.

Демо:

input {
  width: 100%;
  color: white;
  border: none;
  border-bottom: 1px solid grey-light;
  outline: none;
  font-size: 1rem;
  margin-bottom: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: green;
}

input:focus {
  background: green;
}

<form class="form">
  <input type="text" name="name" class="form__name" placeholder="Name*" />

  <input type="email" name="email" class="form__email" placeholder="Email*" />
</form>

Answer 2

Думаю, вам нужно использовать свойство: focus.

Вот так:

input:focus {
   background: #161616;
}

Answer 3

Используйте input: focus ниже input, чтобы написать свои css правила для сценария фокусировки.