Заполнитель Firefox До того, как не работает селектор CSS

css css3 sass css-selectors placeholder

2166 просмотра

1 ответ

1237 Репутация автора

Я использую последнюю версию Firefox 30.0. Я пытаюсь вставить красный шрифт потрясающей звездочкой перед заполнителем обязательных полей. У меня это работает в Chrome без проблем, но у меня проблемы с FF и.

Вот кодекс, иллюстрирующий мою проблему - http://codepen.io/anon/pen/BLibw

Моя разметка:

<input placeholder="Address" data-required required id="id_street" name="street" type="text" />

Мой CSS (sass):

[data-required] {
    &::-webkit-input-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; }
    &::-moz-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; } /* firefox 19+ */
    &:-ms-input-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; } /* ie */
}

Примечание: Оказывается, IE тоже доставляет мне неприятности.

Спасибо за вашу помощь!

Автор: anthony-dandrea Источник Размещён: 24.06.2014 03:12

Ответы (1)


5 плюса

557783 Репутация автора

Решение

Проблема не в заполнителе, а в том, что вы пытаетесь применить ::beforeпсевдоэлемент к элементу input, который не поддерживается кросс-браузерным, поскольку он не определен в стандартах. Смотрите этот ответ .

Поскольку это, очевидно, зависит от того, [data-required]какой элемент формы (хотя мне не ясно, зачем вам нужен data-requiredатрибут в дополнение к стандартному required), вам может потребоваться добавить дополнительный spanэлемент после элемента inputи стиля этого элемента, используя селектор брата, а не псевдоэлемент.

Автор: BoltClock Размещён: 24.06.2014 06:45
Вопросы из категории :
32x32