Firefox рисует красную рамку на требуемом поле выбора

Firefox 21 рисует красные границы вокруг необходимых выборочных боксов, когда они привязаны к модели с угловыми углами.

<select ng-model="color" ng-options="c.text for c in colors" required>
   <option value="">-- choose color --</option>
</select>

Есть ли способ разрешить Firefox проверять ввод после выбора (или не выбора) элемента?

→ Скрипка, чтобы продемонстрировать проблему

Ответы

Ответ 1

Чтобы обойти это, вы можете отключить требуемый стиль, если форма только нетронутая:

.ng-pristine .ng-invalid-required {
    box-shadow: none;
}

После того, как пользователь ввел неверные данные (и класс ng-pristine был изменен на ng-dirty), box-shadow снова отобразит b/c, это правило больше не будет применяться.

Ответ 2

Это не имеет никакого отношения к AngularJS, но это функция браузера, которую вы можете контролировать с помощью CSS.

Взгляните на этот MDN-Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid и этот вопрос: Firefox 4 Требуемая форма ввода RED border/outline

С помощью этого CSS Firefox, похоже, ведет себя так же, как Chrome:

select:invalid {
    box-shadow: none;
}

http://jsfiddle.net/xLmC2/6/

Ответ 3

@klamping: ваше решение работает, но: Как только вы начнете вводить в другое поле, ваше поле получает красную тень (поскольку form.ng-pristine больше не существует).

Лучший способ:

.ng-untouched.ng-invalid-required { box-shadow:none; }

Недостаток: красная тень не отображается, когда пользователь отправляет форму, не щелкая в этом поле (но отображается всплывающая подсказка).

@DanEEStar: Проблема возникает только при наличии AngularJS. Ваше решение, безусловно, работает, но полностью разбивает красную подсветку (т.е. После отправки формы).

Я создал отчет об ошибке для AngularJS здесь: https://github.com/angular/angular.js/issues/12102

Пример:

<div ng-app>
<form>
<input type="text" ng-model="a" required>
</form>
</div>

Здесь скрипка: https://jsfiddle.net/5yh58orm/11/

Ответ 4

Решение Thomas Landauer kinda работает:), но как только вы нажмете/сфокусируете поле, тень поля снова станет красной,

Я предлагаю использовать:

.ng-pristine.ng-invalid-required { box-shadow:none; }

Ответ 5

Чтобы полностью удалить его, введите css:

:-moz-ui-invalid:not(output) {
    box-shadow: none;
}

Ответ 6

Для angular2 это:

.ng-pristine.ng-invalid {
  box-shadow: none;
}

Ответ 7

У меня была такая же проблема, когда я использовал поле выбора вне формы. Проблема была исправлена, когда я это сделал:

<form novalidate>
    <select>
    <option value=""></option>
    </select>
</form>

Я думаю, что это браузер и не имеет ничего общего с angular?