Задать вопрос
@AlTerminator
css

Как в CSS прописать условие, при котором кнопка отобразится?

Нужно, чтобы при всех одновременно валидных input-ах отобразилась кнопка.

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <input required name="InputFIO">
 <input required name="InputPhone">
 <input required name="InputEmail">
 <button>gg</button>
</body>
</html>


CSS:

button
{
 display: none;
}

form:has(input:valid) button /* Какое условие здесь прописать?*/
{
 display: block;
}
  • Вопрос задан
  • 76 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
От обратного

form:has(:invalid) button {
  display: none;
}


-----------------------
Но вообще с точки зрения юзабилити, я считаю плохой практикой прятать или дизаблить кнопку.
Лишня когнитивная нагрузка на пользователя: "где кнопка? как отправить форму? почему она не нажимается? я же вроже все заполнил..."

Лучше оставить возможность нажатия кнопки отправки и прямо уведомлять юзера о его ошибках по нажатию.
Ответ написан
9 комментариев
9 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Верстальщик HTML
MST
от 450 $
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спинтакс шаблон
26 дек. 2024, в 14:40
15000 руб./за проект
С ++ парсер тхт логов
26 дек. 2024, в 14:27
100000 руб./за проект
Создание промо-роликов с использованием ИИ и моушн-дизайна
26 дек. 2024, в 13:56
90000 руб./за проект
Ещё заказы