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

Question

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

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

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

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

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

Я посмотрел на :required и :invalid от новый псевдо селектор, но изменения для до и после проверка. (из Firefox 4 требуется форма ввода красная граница / контур)

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

642 5

border attributes firefox4 required

5 ответов:

Comments

Ничего не найдено.

lnrbob · Accepted Answer · 2011-06-01 13:50:53

Это было немного сложно, но я настроил этот exmaple:http://jsfiddle.net/c5aTe/ который работает для меня. В основном трюк, кажется, обойти имея заполнитель текста, который является недействительным. В противном случае вы должны быть в состоянии сделать это:
input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}
или что-то подобное...

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

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

EDIT

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

HTH:)

редактировать после приема:

резюме примеров по запросу OP (обратите внимание, что первые два предназначены только для FF4 - не Хром)

исправить для FF проверки Вашего места держатель текста:http://jsfiddle.net/c5aTe/

исправление для проверки FF при вводе:http://jsfiddle.net/c5aTe/2

JS решение переключение стилей / проверка: http://jsfiddle.net/c5aTe/4

Dan · Accepted Answer · 2014-01-18 02:21:44

начиная с Firefox 26, фактический CSS, используемый для идентификации недопустимых обязательных полей, выглядит следующим образом (исходит из форм.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.5 px, не глядя на источник moz.

, чтобы отключить его, вы можете использовать:
input:invalid {
    box-shadow: none;
}

Randy Greencorn · Accepted Answer · 2013-08-14 08:52:15

вот очень простое решение, которое сработало для меня. Я в основном изменил уродливый красный на очень хороший синий, который является стандартным цветом для необязательных полей и веб-соглашения:
:required {
    border-color: rgba(82, 168, 236, 0.8);
}

WVDominick · Accepted Answer · 2012-08-11 10:30:50

Это хорошо работало для меня:
input:invalid {
     -moz-box-shadow: none;
}

Anoop Velluva · Accepted Answer · 2015-06-19 10:27:58

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

$("форма").attr ("novalidate", true);

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