html - 占位符样式在 chrome 中不起作用?

标签 html css

<分区>

我的这段代码在 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..."/>

最佳答案

我在互联网上做了一些搜索,找到了我认为是 the answer 的内容。对你的问题。

Don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.

关于html - 占位符样式在 chrome 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45592319/

相关文章:

html - Flex/Grid 布局不适用于按钮或字段集元素

javascript - Angularjs标记表行或列取决于值

css - 使图像底部的 css 圆圈响应并位于固定位置

html - 自定义选择不适用于 IE9

html - 隐藏的用户如何点击输入字段?

javascript - 如何从公式中读出数据?

html - 当显示设置为无时,Twitter 小部件将不会填充

html - 如何将 svg 图标添加到带有文本的按钮

html - Logo 下方的 Bootstrap 3 导航栏

css - 底部边框仅在 Internet Explorer 7 中使用带渐变的背景图像