Заполнитель Firefox До того, как не работает селектор CSS
2166 просмотра
1 ответ
Я использую последнюю версию 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 Источник Размещён: 12.11.2019 09:49Ответы (1)
5 плюса
Проблема не в заполнителе, а в том, что вы пытаетесь применить ::before
псевдоэлемент к элементу input
, который не поддерживается кросс-браузерным, поскольку он не определен в стандартах. Смотрите этот ответ .
Поскольку это, очевидно, зависит от того, [data-required]
какой элемент формы (хотя мне не ясно, зачем вам нужен data-required
атрибут в дополнение к стандартному required
), вам может потребоваться добавить дополнительный span
элемент после элемента input
и стиля этого элемента, используя селектор брата, а не псевдоэлемент.
Вопросы из категории :
- css Как определить, какой из указанных шрифтов был использован на веб-странице?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- css3 Как я могу изменить порядок моих div с CSS?
- css3 Как заставить div заполнить оставшееся горизонтальное пространство?
- css3 Как нарисовать вертикальный текст с помощью кросс-браузера CSS?
- sass Как я могу процитировать строки в SASS?
- sass Создание Sass Mixin с необязательными аргументами
- sass Есть ли SASS.js? Что-то вроде LESS.js?
- sass Можно ли импортировать весь каталог в sass, используя @import?
- css-selectors Какие символы действительны в именах / селекторах классов CSS?
- css-selectors В CSS какая разница между "." и "#" при объявлении набора стилей?
- css-selectors Можете ли вы нацелить элемент с помощью CSS, только если присутствуют 2 класса?
- css-selectors Лучший способ найти элементы DOM с помощью селекторов CSS
- placeholder Изменение цвета заполнителя ввода HTML5 с помощью CSS
- placeholder Каков наиболее точный способ эмулировать атрибут placeholder в браузерах, которые его не поддерживают изначально?
- placeholder Как сделать заполнитель для поля «Выбрать»?
- placeholder Заполнитель странное поведение на входе