Можно ли изменить стиль кнопки в зависимости от валидности инпута чисто на css?

Question

Примерный код в html:

    <form action="#">
        <label for="email">
            <input type="email" name="email" id="email" placeholder="Enter your email" 
             required>
        </label>
        <button type="submit">Submit</button>
     </form>

Необходимо изменить стиль кнопки, когда пользователь вводит e-mail в поле импута. Можно это сделать на чистом css, без использования js?

Answer 1

Только при условии, что input и input[type="submit"] будут лежать на одном уровне, тогда при помощи input:valid ~ input[type="submit"] можно изменять стили кнопки.
Но лучше JS.

.submit {
  border-radius: 6px;
  border: none;
  background-color: #ccc;
  padding: .25em .75em;
  box-sizing: border-box;
}

#email:valid ~ .submit {
  background-color: lightgreen;
}

<form action="#">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" placeholder="Enter your email" required>
  <button class="submit" type="submit">Submit</button>
</form>

БЛОГ НА HUSL

Можно ли изменить стиль кнопки в зависимости от валидности инпута чисто на css?

Ответы (1 шт):