Firefox 4: Есть ли способ удалить красную рамку в виде необходимой формы?


52

Когда требуется определение в поле формы, Firefox 4 автоматически показывает красную границу этого элемента, даже если пользователь нажимает кнопку отправки.

<input type="text" name="example" value="This is an example" required /> 

Я думаю, что это беспокоит пользователя, поскольку он/она не совершал ошибок в начале.

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

Я смотрел на :required и :invalid от нового селектора псевдо, но эти изменения для до и после проверки. (от Firefox 4 Required input form RED border/outline)

Есть ли способ отключить красную рамку перед тем, как пользователь отправит форму и покажет ее, если есть некоторые недостающие поля?

+1

Как насчет контура: 0; ? 19 май. 142014-05-19 14:20:12

104

Это было немного сложно, но я создал этот exmaple: http://jsfiddle.net/c5aTe/, который работает для меня. В принципе, кажется, что трюк оборачивается тем, что текст-заполнитель недействителен. В противном случае вы должны быть в состоянии сделать это:

input:required { 
    box-shadow:none; 
} 
input:invalid { 
    box-shadow:0 0 3px red; 
} 

или что-то подобное ...

НО поскольку FF4 решает подтвердить свой шаблонный текст (не знаю, почему ...) решение в скрипкой (маленький хакерский - использует !important).

Надеюсь, что это поможет!

EDIT

Doh !! - Я чувствую себя глупо. Я обновил свою скрипку: http://jsfiddle.net/c5aTe/2/ - вы можете использовать псевдокласс класса :focus, чтобы элемент стилизовал как действующий, пока пользователь печатает. Это будет по-прежнему выделить красный цвет, если содержание является недействительным, когда элемент теряет фокус, но я думаю, что есть только так много вы можете сделать с проектируемым поведением ...

НТН :)


EDIT после прием:

Резюме примеров по просьбе ФПА в (обратите внимание на первые две предназначены только для FF4 - не Chrome)

  1. Фикса для FF проверки вашего места держателя текста: http://jsfiddle.net/c5aTe/
  2. Фикс для FF проверяющий, как вы типа: http://jsfiddle.net/c5aTe/2
  3. JS решение переключая стили/проверки: http://jsfiddle.net/c5aTe/4
  0

Большой прорыв, но ошибка «недействительная», кажется, отображается, когда пользователь нажимает на вход =>, когда вход пуст, прежде чем он что-то на самом деле что-то пишет. Но возможно, что я хочу, это ошибка в FF4, которая не может быть решена:/ 31 май. 112011-05-31 15:51:57

  0

Но +1 для вашего способа ограничить ужасную тень красного ящика :) 31 май. 112011-05-31 15:52:52

  0

Не думайте, что вы можете это сделать, потому что, как ни странно, это почти * слишком умный и проверенный на лету. Вы можете быть умны с помощью некоторого дополнительного javascript, который добавляет или удаляет класс из формы при его отправке. Затем вы можете переопределить любую подсветку проверки, основанную на том, что этот класс присутствует или нет. Хорошая вещь об этом заключается в том, что он по-прежнему использует встроенную проверку не так хорошо требует дополнительных js ...: | 31 май. 112011-05-31 16:00:36

+1

имел некоторое вдохновение, делая завтрак - добавленный выше! 01 июн. 112011-06-01 06:38:57

  0

Умный! : p Но если вы посмотрите, у вас есть тень для исходного состояния и тень окна для недопустимого состояния. Оба они показаны. Я начинаю верить, что это ошибка Mozilla, они не думали о начальном состоянии. Если это правильно, и никто больше не будет работать полностью, я не буду принимать ваш ответ, но я дам вам щедрость (надеюсь, это возможно, если нет, я приму ваш ответ). Вы этого заслуживаете :) Спасибо за вашу помощь! 01 июн. 112011-06-01 07:29:22

  0

спасибо за комментарий :). Просто чтобы проверить - вы смотрите на вторую скрипку? Я получаю только 1 тень после укладки, когда вводится недопустимый контент, а не при наборе текста, а не перед тем. Невозможно увидеть тень по умолчанию - она ​​должна быть удалена исходной декларацией css. Мне любопытно, почему мы видим разные результаты ... Кроме того, я высмеивал потенциальное решение javascript (с грязными встроенными функциями) с двумя примерами: http://jsfiddle.net/c5aTe/4/ 01 июн. 112011-06-01 10:20:32

  0

Ну, я знаю, что второй jsfiddle не работал на меня ... Я тестировал его на Chrome (позор на мне). Но это обнаруживает другую проблему (для другого вопроса тогда): почему проблема теперь в Chrome: p Ну, вы заслужили щедрость и принятый ответ, так как теперь он работает для FF! Не могли бы вы обновить свой ответ вторым jsfiddle и последним, который вы предложили, оба отлично работают (один в FF только, второй - с использованием JS в обоих). Это может помочь другим пользователям с одинаковой проблемой. Еще раз спасибо :) 01 июн. 112011-06-01 10:29:29

  0

(я могу только наградить щедростью за 56 минут ... вам придется подождать;)) 01 июн. 112011-06-01 10:30:00

  0

Woot - добавлен в мой ответ, как вы предложили. :) 01 июн. 112011-06-01 10:54:11

  0

Спасибо! Осталось 31 минута ...: p 01 июн. 112011-06-01 10:55:22

  0

Мне просто нужно было это сделать: выбрать [обязательно] { box-shadow: none! important; } 04 янв. 132013-01-04 20:06:04


0

Это хорошо работало для меня:

input:invalid { 
    -moz-box-shadow: none; 
} 
+4

Проблема заключается в том, что после проверки тень окна остается недействительной, и пользователь не имеет понятия о том, где происходят ошибки. Я хочу НЕ показывать красную рамку в нормальном состоянии формы, но показывать ее, когда пользователь отправляет/размывает форму, если есть ошибка. 31 май. 112011-05-31 11:33:24


2

Вот очень простое решение, которое работает для меня.Я в принципе изменил уродливый красный в очень хороший синий, который является стандартным цветом для необязательного полей, а также веб-конвенции:

:required { 
    border-color: rgba(82, 168, 236, 0.8); 
} 

24

С Firefox 26, фактический CSS используется для идентификации недействительных обязательных полей следующим образом (происходит от forms.css):

:not(output):-moz-ui-invalid { 
    box-shadow: 0 0 1.5px 1px red; 
} 

Для репликации в других браузерах, я использую:

input:invalid { 
    box-shadow: 0 0 1.5px 1px red; 
} 

Я играл с настройками пикселей, но я никогда бы не догадался 1. 5px, не глядя на источник moz.

Чтобы отключить его, вы можете использовать:

input:invalid { 
    box-shadow: none; 
} 

0

Пожалуйста, попробуйте это,

$ ("форма") Attr ("NOVALIDATE", правда);.

для вашей формы в вашем глобальном файле .js или в разделе заголовка.