Цвет текста заполнителя отличается в зависимости от браузера

Question

Шрифт текста показывает белый в crome и черный в Mozilla Fire вот мой код

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.Name-colorclass {
    color: #ffffff !important;
}

<span class="wpcf7-form-control-wrap text-780"><input type="text" name="text-780" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required Name-colorclass" aria-required="true" aria-invalid="false" placeholder="Name"></span>

Answer 1

Это потому, что вы не установили цвет для самого заполнителя, Chrome умно меняет цвет заполнителя (и если вы хотите быть конкретным, вы можете использовать ::placeholder, чтобы изменить его обратно) Firefox этого не делаетВы должны быть конкретны

Вот как это сделать с псевдоклассом ::placeholder

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.Name-colorclass {
    color: #fff;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.Name-colorclass::placeholder,
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.Name-colorclass::-moz-placeholder,
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.Name-colorclass:-moz-placeholder,
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.Name-colorclass::-webkit-placeholder,
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.Name-colorclass:-ms-input-placeholder {
  color:#fff;
}

<span class="wpcf7-form-control-wrap text-780"><input type="text" name="text-780" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required Name-colorclass" aria-required="true" aria-invalid="false" placeholder="Name"></span>