Question

我在FF和Chrome中使用HTML5占位符'问题'造型CSS。例如：

http://jchmusic.com

...点击“联系”主菜单。

似乎如果表单是position：absolute，则占位符文本伪样式-only-如果该字段处于焦点（选中），则起作用。否则，它只会恢复到“真实”元素的样式。

如果表单是position：relative，则工作正常。

这是我正在使用的代码

input:-moz-placeholder{color:#999; font-family:"Courier New", Courier, monospace}
input:-ms-input-placeholder{color:#999; font-family:"Courier New", Courier, monospace}

::-webkit-input-placeholder { /* WebKit browsers */
 color:    #999; font-family:"Courier New", Courier, monospace
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:    #999; font-family:"Courier New", Courier, monospace
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    #999 !important;
     font-family:"Courier New", Courier, monospace;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:    #999;
    font-family:"Courier New", Courier, monospace
}

我在这里读了几个关于'悬停'的轶事，但我不知道这是否适用于我的情况。是否有CSS的解决方法，或者我只需要回到jQuery？

Answer 1

我已经测试了你的代码，我注意到有些javascript正在添加

class="placeholder"

到未选择时的输入，可能会改变正常占位符的行为。这看起来像一些jQueryUI干预

样式占位符伪只适用于焦点？

1 个答案: