占位符样式在 chrome 中不起作用？ [复制]答案

【问题标题】：placeholder style not working in chrome? [duplicate]占位符样式在 chrome 中不起作用？ [复制]
【发布时间】：2018-01-17 10:33:55
【问题描述】：

我的这段代码在 chrome 和 Internet Explorer 中运行良好。但是每当我结合下面的 CSS 样式时，它只能在 Internet Explorer 中运行，而不能在 chrome 中运行。

有人知道这种奇怪的行为吗？

.searchBar{
	height:50px;
	width:200px;
	background-color:#9a005f;
	color:#fff;
}
.searchBar:focus{
	background-color:#9a445f;
}
.searchBar::-webkit-input-placeholder{
color:#fff;
}
.searchBar::-ms-input-placeholder{
	color:#fff;
}

&lt;input type="text" class="searchBar" placeholder="Search for..."/&gt;

编辑： 以下内容不适用于我的 chrome，但适用于 IE。

.searchBar{
	height:50px;
	width:200px;
	background-color:#9a005f;
	color:#fff;
}
.searchBar:focus{
	background-color:#9a445f;
}
.searchBar::-webkit-input-placeholder,
.searchBar::-ms-input-placeholder{
    color:#fff;
}

&lt;input type="text" class="searchBar" placeholder="Search for..."/&gt;

【问题讨论】：

Chrome 已经好几年没有成为 webkit 浏览器了，现在大多数供应商前缀都在标记后面，所以我对你所做的不起作用并不感到惊讶。
那为什么它只适用于.searchBar::-webkit-input-placeholder？
好吧，我刚刚注意到您缺少“。”在第二行。 Chrome 确实遵循许多 webkit 前缀，但我认为它们不会为任何较新的前缀这样做。显然它适用于占位符。
你的代码 sn-p 在我的 chrome 上工作。
也可以在我的 Chrome 上使用。 60.0.3112.90 64 位

标签： html css

【解决方案1】：

我在互联网上进行了一些搜索，发现我认为您的问题是 the answer。

不要混合供应商前缀选择器（-moz、-webkit、-ms、...）。例如，Chrome 不会理解“-moz-”，然后忽略整个选择器。

【讨论】：