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>

占位符文本颜色因浏览器而异

1 个答案: