2012-03-15 5 views
1

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

<!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, но, похоже, мне не нужно беспокоиться об этом, если все, что я хочу, это другой цвет, применяемый к вводу, когда пользователь начинает вводить текст.

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

+0

Я не думаю, что для этого есть решение elegan. См. Соответствующий http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – antyrat

ответ

2

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

1

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

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

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

+2

Целью должно быть «каждый использует один стандарт», а не «каждый использует один стандарт, кроме IE который использует другой ». Цель должна опираться на «стандарт - это то, что имеет смысл», не обязательно «стандарт - это то, что кто-то отправляет первым». В этом случае WebKit делает то, что имеет некоторые серьезные недостатки (и которые они не предлагали для стандартизации). Mozilla делает то, что имеет другой набор недостатков (также не предлагаемый для стандартизации). Когда люди выясняют, как это сделать, это должно стать стандартизированным. –

+0

... lol ... сарказм просто не понят онлайн больше – SpYk3HH

+0

Множество людей говорят точно, что вы сделали, не будучи саркастичным .... –

0

Возможно, вы можете достичь почти такой же эффект с

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

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

0

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

0

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

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

Смежные вопросы