Chrome 和 Opera 占位符
在 chrome 中，我有这个 CSS：
input::-webkit-input-placeholder{color:blue;}
input:-moz-placeholder{color:blue;}
我决定将其优化为：
input::-webkit-input-placeholder, input:-moz-placeholder{color:blue;}
并且占位符消失了！为什么会发生这种情况——某种错误还是什么？
另一个问题是 Opera： document.createElement('input') 中的'placeholder' 返回 true。所以这意味着它是可用的。但它没有显示。
输入的其余 CSS（如果需要）：
input[type=text]{
color: blue;
height: 24px; width: 75px;
padding-left: 24px;
outline: none;
background-color: #ABABAB;
background-image: url('searchtool-1.png');
background-repeat: no-repeat;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
编辑：demo
In chrome I had this CSS :
input::-webkit-input-placeholder{color:blue;}
input:-moz-placeholder{color:blue;}
Idecided to optimize it to:
input::-webkit-input-placeholder, input:-moz-placeholder{color:blue;}
And the placeholder disappered! Why is this happenning - some kind of bug or what?
And the other problem is Opera:
'placeholder' in document.createElement('input') returns true. So this means that it is available. But it is not showing.
The rest of the CSS for the input(if needed):
input[type=text]{
color: blue;
height: 24px; width: 75px;
padding-left: 24px;
outline: none;
background-color: #ABABAB;
background-image: url('searchtool-1.png');
background-repeat: no-repeat;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
Edit: demo
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
虽然您可以混合未知的 CSS 属性，但不能混合不同的未知 CSS 选择器。如果浏览器看到未知的选择器，它将忽略该空洞块。
这是 CSS 规范规定的。
对于 IE10，您还应该使用：:-ms-input-placeholder。
Opera 应该支持输入元素中的占位符。你可以拉小提琴吗？
While you can mix unknown CSS properties, you can not mix different unknown CSS selectors. If a browser sees an unknown selector, it will ignore the hole block.
This is by CSS specification.
You should also use: :-ms-input-placeholder for IE10.
Opera should support the placeholder in input elements. Ca you make a fiddle?