[英]different placeholder text styles in the same form
Does anyone know if it is possible to have different styles for the placeholder text in the same form? 有人知道相同形式的占位符文本是否可以具有不同的样式?
So far I have 到目前为止,我有
::-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;
}
which works great for making the text black; 这对于使文本变黑非常有用; however I also want to have blue text in a different
但是我也想用不同的蓝色文字
Here you Go: 干得好:
CSS: 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; }
Mark up: 标记:
<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>
If you have different classes on your inputs or different input types, you can do something like this: 如果您在输入上具有不同的类或不同的输入类型,则可以执行以下操作:
input[type='text']::-webkit-input-placeholder {
color: #000;
}
input[type='email']::-webkit-input-placeholder {
color: red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.