Цвета заполнителя не работают CSS

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

::-webkit-input-placeholder { 
    color: #000000; 
} 

:-moz-placeholder { 
    color: #000000; 
} 

:input:-ms-input-placeholder { 
    color: #000000; 
}

Так, чтобы получить его работать на моем поле ввода Я пробовал:

.search-top-container form input::-webkit-input-placeholder { 
    color: #000000; 
} 

.search-top-container form input:-moz-placeholder { 
    color: #000000; 
} 


.search-top-container form input:-ms-input-placeholder { 
    color: #000000; 
}

Но это не работает. Я также пытался использовать важные теги, но это не работает. Любая помощь очень ценится, спасибо!

источник

2015-11-26 thairish

Просто, чтобы проверить очевидное: если вы делаете вход .search-top-container form {background: magenta} ', появляется ли текстовое поле ярко-розового? –

Привет, да, я применил другой стиль для ввода с помощью ввода формы .search-top-container {} Я просто попробовал фон, и он отобразил новый цвет. – thairish

Хорошо. Следующее, что нужно попробовать: удалить 'input'. Попробуйте использовать только форму .search-top-container: -ms-input-placeholder' (и другие префиксы), чтобы увидеть, работает ли это. –

Вы не говорите, в каком браузере он не работает, но у вас есть ошибка с кодом Mozilla. Последние версии браузеров Mozilla (начиная с версии v19) работают только с двумя двоеточиями, поэтому ::-moz-placeholder вместо :-moz-placeholder.

Кроме того, стиль по умолчанию для заполнителя содержит opacity:.4, поэтому, если вы хотите совместимость с кросс-браузером, вам также придется установить непрозрачность. См. MDN.

.search-top-container form input::-webkit-input-placeholder { 
 
    color: #F00000; 
 
    opacity: 1; 
 
} 
 
.search-top-container form input::-moz-placeholder { 
 
    color: #F00000; 
 
    opacity: 1; 
 
} 
 
.search-top-container form input:-ms-input-placeholder { 
 
    color: #F00000; 
 
    opacity: 1; 
 
}

<div class="search-top-container"> 
 
    <form> 
 
    <input placeholder="Firstname Lastname" /> 
 
    </form> 
 
</div>

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

источник

2015-11-27 10:42:55

Цвета заполнителя не работают CSS

ответ

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