Question

我在html中有这样的输入元素：

<input type="text" placeholder="any TEXT" />

在占位符的CSS中使用样式：

::-webkit-input-placeholder { color: red; text-transform: uppercase;}
input::-moz-placeholder {color: red; text-transform: uppercase;}
input:-moz-placeholder {   /* Older versions of Firefox */  color: red; text-transform: uppercase;}
input:-ms-input-placeholder { color: red;   text-transform: uppercase;}

工作正常，但是，问题是它将这个样式应用于页面上的所有输入元素，但是它们假设具有不同的占位符样式。如何将CSS中的占位符样式限制为特定类 - 让我们说“ .placeholder-red ”，所以在HTML中我可以像常规类一样使用它：

<input type="text" class="placeholder-red"any TEXT" />

???

我尝试过这样的事情：

.placeholder-red::-webkit-input-placeholder { color: red; text-transform: uppercase;}

并且它可以工作，但仅使用 :: - webkit-input-placeholder {...} （意味着此样式可能无法在其他浏览器上运行），但我该如何应用它输入:: - moz-placeholder {...} ？我尝试过这样的事情 - 不要工作：

.placeholder-red input::-moz-placeholder {color: red; text-transform: uppercase;}

Answer 1

正如你所说.placeholder-red::-webkit-input-placeholder{...}它运作良好，你正走在正确的道路上。

要应用其余的CSS支持，请执行以下操作：

input.placeholder-red::-moz-placeholder {
    color: red; text-transform: uppercase;
}
input.placeholder-red:-moz-placeholder {   
    /* Older versions of Firefox */  
    color: red; text-transform: uppercase;
}
input.placeholder-red:-ms-input-placeholder { 
    color: rgba(0,5,143,.5);  text-transform: uppercase;
}

请注意，我使用的是一个简单的CSS选择器：input.placeholder-red然后将伪类应用到此选择器上。

让我知道this jsFiddle是否适合您。

如何仅将伪元素样式应用于特定类？

1 个答案: