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

Posted 2023-03-05

【中文标题】占位符样式在 chrome 中不起作用？ [复制]

【英文标题】：placeholder style not working in chrome? [duplicate]

【发布时间】：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;

<input type="text" class="searchBar" placeholder="Search for..."/>

编辑： 以下内容不适用于我的 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;

<input type="text" class="searchBar" placeholder="Search for..."/>

【问题讨论】：

Chrome 已经好几年没有成为 webkit 浏览器了，现在大多数供应商前缀都在标记后面，所以我对你所做的不起作用并不感到惊讶。

那为什么它只适用于.searchBar::-webkit-input-placeholder？

好吧，我刚刚注意到您缺少“。”在第二行。 Chrome 确实遵循许多 webkit 前缀，但我认为它们不会为任何较新的前缀这样做。显然它适用于占位符。

你的代码 sn-p 在我的 chrome 上工作。

也可以在我的 Chrome 上使用。 60.0.3112.90 64 位

【参考方案1】：

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

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