Подтвердить что ты не робот

Firefox 4 Требуемая форма ввода RED border/outline

Недавно я разработал плагин jQuery HTML5, и у меня возникли проблемы с удалением красной границы требуемых полей в бета-версии FF4.

Я заметил, что FF применяет эту границу/схему в обязательных полях и удаляет ее, когда значение установлено. Проблема в том, что я использую атрибут value, чтобы эмулировать placeholder attr в старых браузерах. Поэтому мне нужны все входы с этой функцией, чтобы не показывать красную линию.

Здесь вы можете увидеть проблему на демо-странице плагина

4b9b3361

Ответ 1

Есть несколько новых псевдоселекторов для некоторых новых функций формы HTML5, доступных вам в CSS. Вероятно, вы ищете :invalid. Ниже приведены все MDC Firefox 4 docs:

  • Псевдокласс класса :invalid применяется автоматически к элементам, содержимое которых не может быть проверено в соответствии с настройкой типа ввода

  • Псевдокласс класса :-moz-submit-invalid применяется к кнопке отправки в форме поля, когда одно или несколько полей формы не подтверждается.

  • :required псевдокласс теперь автоматически применяется к полям, которые указать требуемый атрибут; :optional псевдокласс применяется к все остальные поля.

  • pseudo-class имеет был добавлен, чтобы вы могли текст заполнителя в полях формы.

  • Псевдоселектор :-moz-focusring позволяет указать внешний вид когда Гекко считает, что элемент должен иметь фокус отображаемая индикация.

Ответ 2

Чтобы быть более конкретным, вам нужно применить этот стиль к элементу управления вводами.

input:invalid {
    box-shadow: none;
}

Ответ 3

используйте этот код как быстрое и простое решение

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

Ссылка: - https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

Ответ 4

Попробуйте это,

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

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

Ответ 5

Вставьте свой input в form с атрибутом novalidate

<form novalidate>
    <input required>
</form>