2016-01-13 4 views
3

Как изменить заполнитель цвет в CSS

<input name="email" type="text" id="email" size="30" value="" placeholder="EMAIL"/> 
 
<input name="phone" type="text" id="phone" size="30" value="" placeholder="PHONE"/>

У меня есть две формы, которые имеют ID = "электронная почта". First форма заполнитель цвет белый. Второй - черный.

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

input#email:-moz-placeholder{ 
 
    color: #999 !important; 
 
} 
 

 
input#email:-ms-input-placeholder{ 
 
    color: #999 !important; 
 
}

+0

Возможная Дубликат [Изменение входного в HTML5 заполнитель цвета с CSS] (http://stackoverflow.com/questions/2610497/change-an-inputs- html5-placeholder-color-with-css) – tigeruppercut

ответ

4

Попробуйте это:

#your_form input#email::-webkit-input-placeholder {color:#999;} 
#your_form input#email::-moz-placeholder   {color:#999;} 
#your_form input#email:-moz-placeholder   {color:#999;} 
#your_form input#email:-ms-input-placeholder  {color:#999;} 
+0

Спасибо @Igor Tkachuk. Этот ответ исправить мою проблему – apisv2

3

Если я правильно понял ваш вопрос, добавьте телефонный идентификатор к тому же правилу CSS как электронная почта. Например:

input#email:-moz-placeholder, input#phone:-moz-placeholder { 
    color: #999 !important; 
} 
input#email:-ms-input-placeholder, input#phone:-ms-input-placeholder { 
    color: #999 !important; 
} 

Или просто удалите идентификатор и сделайте каждый вход с помощью заполнителя серым.

input:-moz-placeholder { 
    color: #999 !important; 
} 
input:-ms-input-placeholder { 
    color: #999 !important; 
} 

О, и для вашей информации необходимо добавить больше префиксов. Прочитайте это: Change an HTML5 input's placeholder color with CSS

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