html - Chrome 和 Opera 占位符

Question

在 chrome 中我有这个 CSS :

input::-webkit-input-placeholder{color:blue;}
input:-moz-placeholder{color:blue;}

我决定将其优化为:

input::-webkit-input-placeholder, input:-moz-placeholder{color:blue;}

占位符消失了!为什么会发生这种情况 - 某种错误或什么？

另一个问题是 Opera: 'placeholder' in document.createElement('input')返回真。所以这意味着它是可用的。但它没有显示。

输入的其余 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

Answer 1

虽然您可以混合使用未知的 CSS 属性，但您不能混合使用不同的未知 CSS 选择器。如果浏览器看到未知的选择器，它将忽略孔 block 。

这是 CSS 规范。

对于 IE10，您还应该使用::-ms-input-placeholder。

Opera 应该支持输入元素中的占位符。你会拉 fiddle 吗？