在CSS中,可以placeholder
使用供应商特定的伪类和伪元素的组合来为输入中的文本设置样式(以获得最佳的跨浏览器覆盖)。
这些都具有相同的基本属性(即:文本样式和颜色声明)。
但是,尽管我不可避免地希望使用相同的样式,而与浏览器供应商无关,但似乎无法将它们组合成一个逗号分隔的选择器(就像您想要两个选择器共享的其他CSS一样)相同的样式)。
例如,我倾向于使用以下四个选择器来定位占位符样式:
input:-moz-placeholder
input::-moz-placeholder
input:-ms-input-placeholder
input::-webkit-input-placeholder
(尽管:-moz-placeholder
不赞成这样做,::-moz-placeholder
但仅在FireFox 19发行时才发生,因此目前都需要两者都可以提供更好的浏览器支持)。
令人沮丧的是,声明和赋予每种(相同)样式会导致CSS内的大量重复。
因此,为确保占位符文本右对齐和斜体,我将得出以下结论:
input:-moz-placeholder{
font-style: italic;
text-align: right;
}
input::-moz-placeholder{
font-style: italic;
text-align: right;
}
input:-ms-input-placeholder{
font-style: italic;
text-align: right;
}
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
我真正想做的是将它们组合为一个逗号分隔的规则集,如下所示:
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
但是,尽管在少数情况下尝试过此操作,但这似乎从未奏效。这让我担心,CSS的某些基本部分我不了解。
有人能阐明为什么会这样吗?
:-moz-placeholder
伪类仅在最近才随着FireFox 19的引入而贬值,因此遗憾的是两者兼而有之,目前必须使用:-moz-placeholder
双冒号后继者::-moz-placeholder
以确保最佳的浏览器覆盖率。