Изменения цвета в Firefox - PullRequest
Новая
       1

Изменения цвета в Firefox

1 голос
/ 15 марта 2012

Я был удивлен, что это не сработало в Firefox (попробуйте на Chrome и Firefox: http://jsfiddle.net/YzkSx/):

<!doctype html>  
<html>  
<head>  
  <title>Placeholder demo</title>  
  <style type="text/css">
      input {color: red}
  </style>  
</head>  
<body>  
  <input id="test" placeholder="Placeholder text!">  
</body>  
</html>

Поскольку я применяю красный цвет для ввода, заполнитель заканчивается красныма также. В Chrome и Safari, если я «закрашиваю» ввод, заполнитель не затрагивается.

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

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

Ответы [ 5 ]

2 голосов
/ 15 марта 2012

Это на самом деле осознанный выбор реализации (и причина, по которой стиль заполнителя является псевдоклассом, а не псевдоэлементом). Проблема с подходом WebKit заключается в том, что если вы стилизуете цвет и фон ввода с помощью заполнителя, WebKit будет применять цвет фона, но не стиль цвета, и текст заполнителя может легко оказаться нечитаемым. Конечно, вы можете обойти это с помощью специфичных для заполнителей стилей, но люди обычно забывают об этом.

1 голос
/ 15 марта 2012

Для Firefox вы должны будете использовать их стили, как это делает браузер. Еще один признак того, что FF перестает поддерживать "стандарты, которые используют все, кроме IE". Вы можете легко сделать это следующим образом: 

input: { 
    color: red;
}
input:-moz-placeholder {  
    color: #a1a1a1;  
}

Пока браузеры продолжают бороться за контроль над «стандартами», это будет оставаться проблемой. К сожалению, IE и FF борются с webkit с помощью всего, что они получили, но, как было видно из предыдущих обновлений, FF может в конечном итоге появиться, как и в IE ....

0 голосов
/ 15 марта 2012

Наиболее кросс-браузерный, надежный и перспективный способ оформления текста-заполнителя в настоящее время заключается в удалении собственного атрибута placeholder с помощью JavaScript и эмуляции соответствующей функциональности с помощью JS.

Если вам не нужно стилизовать сам текст-заполнитель, :focus псевдокласс, вероятно, должен быть достаточным.

0 голосов
/ 15 марта 2012

Вы должны помнить, брат, что HTML5 еще не является Стандартом, поэтому вы получите кучу странных маленьких ошибок. Но, если можно, я не вижу никакого красного текста через заполнитель внутри элемента ввода.

0 голосов
/ 15 марта 2012

может быть, вы можете достичь почти того же эффекта с 

input { color: ... }
input:focus { color: ... }

без использования -moz-placeholder.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...