Question

是否有人知道是否可以在同一表单中为占位符文本设置不同的样式？

到目前为止我已经

了

::-webkit-input-placeholder {
   color:#000 !important;
}

:-moz-placeholder { /* Firefox 18- */
   color:#000 !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color:#000 !important;  
}

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

非常适合使文字变黑;但是我也想要一个不同的蓝色文本

Answer 1

在这里你去：

Working Example

CSS：

    ::-webkit-input-placeholder { color:#f00; }
    input:-moz-placeholder { color:#f00; }

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

    /* individual */
    #field2::-webkit-input-placeholder { color:#00f; }
    #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
    #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

标记：

<p><input type="search" placeholder="Field 1" id="field1" /></p>
<p><input type="search" placeholder="Field 2" id="field2" /></p>
<p><input type="search" placeholder="Field 3" id="field3" /></p>
<p><input type="search" placeholder="Field 4" id="field4" /></p>

Answer 2

如果您的输入或不同输入类型有不同的类，您可以执行以下操作：

input[type='text']::-webkit-input-placeholder {
    color: #000;
}

input[type='email']::-webkit-input-placeholder {
    color: red;
}

相同形式的不同占位符文本样式

2 个答案: