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

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 中的占位符样式限制为特定的 class - 假设“.placeholder-red” 所以在 HTML 中我可以使用它像常规 class:

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

???

我试过这样的事情：

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

并且有效，但仅适用于 ::-webkit-input-placeholder{...}（这意味着此样式可能不适用于其他浏览器），但是我如何将它应用到 input::-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 然后将伪 class 应用到该选择器上。

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

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

How to apply pseudo-element styling to specific class only?

html

css

placeholder