Как стилизовать сообщения об ошибках проверки формы HTML5 с помощью CSS? - PullRequest
Новая
       27

Как стилизовать сообщения об ошибках проверки формы HTML5 с помощью CSS?

34 голосов
/ 16 марта 2011

Как оформить сообщения об ошибках проверки формы HTML5 с помощью CSS?

Ответы [ 5 ]

8 голосов
/ 20 мая 2011

В настоящее время нет способа стилизовать эти маленькие всплывающие подсказки.Единственный другой вариант, который я выбрал, это отключить проверку браузера все вместе и полагаться на мои собственные сценарии проверки на стороне клиента.

Согласно этой статье: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

"Самый простой способ отказаться - это добавить атрибут novalidate к вашему <form>. Вы также можете установить formnovalidate в элементах управления отправкой."

4 голосов
/ 02 июля 2011

Chrome обеспечивает естественный внешний вид для их речевых пузырей ошибок проверки.Пузырь ошибок состоит из четырех элементов, которые не являются нормативными элементами.Эти четыре элемента можно стилизовать с помощью псевдоэлементов, которые применяются к отдельным разделам пузырька: 

::-webkit-validation-bubble

::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

Обновление: Этот метод устарел.

2 голосов
/ 30 марта 2011

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

:invalid {
    background: #ffdddd;
         }
:valid{
      background:#ddffdd;
      }

Если вам нужна полная ссылка на них, перейдите к Ссылка Mozilla.

P.S. Извините, если я делаю эти ответы неправильно, я новичок в этом сообществе.

1 голос
/ 01 мая 2014

Обязательное поле будет недействительным, пока не будет введен правильный ввод. Поле, которое не является обязательным, но имеет проверку, например поле URL, будет действовать до тех пор, пока не будет введен текст. 

 input:invalid { 
border:solid red;
}

для получения дополнительной информации http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx

0 голосов
/ 10 октября 2013

Для Google Chrome больше нельзя стилизовать сообщения проверки: https://code.google.com/p/chromium/issues/detail?id=259050

...