输入占位符文本的多种样式 [英] Multiple styles for input placeholder text

问题描述

我想对我的输入框占位符文本进行风格化，我这样做：

  ::  -  webkit-input -placeholder {font-size：16pt;颜色：＃555; } 
 ::  -  moz-placeholder {font-size：16pt;颜色：＃555; } 
：-ms-input-placeholder {font-size：16pt;颜色：＃555; } 
 input：-moz-placeholder {font-size：16pt;颜色：＃555; } 
  

但是我有不同的占位符需要不同样式的场景：

这可以吗？我似乎不能成功地结合上面的css与类或和其他类型的元素选择器。我找到的所有教程都停止在只设置一次占位符文本，不会有多个占位符样式。这是一个全局设置？

解决方案

您必须将类与伪元素组合，然后可以应用一个类输入元素：

  input ::  -  webkit-input-placeholder {font -size：16pt;颜色：＃555; } input ::  -  moz-placeholder {font-size：16pt;颜色：＃555; } input：-ms-input-placeholder {font-size：16pt;颜色：＃555; } input：-moz-placeholder {font-size：16pt;颜色：＃555; } input.other ::  -  webkit-input-placeholder {font-size：12pt;颜色：红色} input.other ::  -  moz-placeholder {font-size：12pt;颜色：红色} input.other：-ms-input-placeholder {font-size：12pt;颜色：红色} input.other：-moz-placeholder {font-size：12pt;颜色：红色}  

 < input type =textplaceholder = Hello>< / input>< / input>  

注意：为了清楚和正确，我在此添加了输入 / em>

小提琴

请记住，伪选择器不是页面上的真正元素，而是附加到一些其他元素。将它们与一些其他元素选择器组合，以匹配更具体的内容。

I want to style my input box placeholder text, which I am doing like this:

::-webkit-input-placeholder { font-size: 16pt; color: #555; }
::-moz-placeholder { font-size: 16pt; color: #555; }
:-ms-input-placeholder { font-size: 16pt; color: #555; }
input:-moz-placeholder { font-size: 16pt; color: #555; }

But I have scenarios where different placeholders require different styles like this:

Is this possible to do? I can't seem to successfully combined the css above with classes or and other type of element selector. All the tutorials I've found stop at just setting the placeholder text once and don't get into having multiple placeholder stylings. Is that a global setting?

解决方案

You have to combine the class with the pseudo element, and then you can apply a class to the input elements:

input::-webkit-input-placeholder { font-size: 16pt; color: #555; }
input::-moz-placeholder { font-size: 16pt; color: #555; }
input:-ms-input-placeholder { font-size: 16pt; color: #555; }
input:-moz-placeholder { font-size: 16pt; color: #555; }

input.other::-webkit-input-placeholder { font-size: 12pt; color: red; }
input.other::-moz-placeholder { font-size: 12pt; color: red; }
input.other:-ms-input-placeholder { font-size: 12pt; color: red; }
input.other:-moz-placeholder { font-size: 12pt; color: red; }

<input type="text" placeholder="Hello"></input>
<input type="text" class="other" placeholder="Hello"></input>

Note: I added the input here for clarity and correctness.

Fiddle

Remember, the pseudo selectors aren't real elements on the page, but attached to some other element. Combine them with some other element selector to match something more specific.

这篇关于输入占位符文本的多种样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！