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

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 是否适合您。