html - 同一表单中的不同占位符文本样式

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>