2

我在 FF 和 Chrome 中使用 HTML5 占位符设置 CSS 样式时遇到了“问题”。例子:

http://jchmusic.com

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

似乎如果表单是位置:绝对,则占位符文本伪样式-仅在字段处于焦点(选中)时才有效。否则,它只会恢复为“真实”元素的样式。

如果形式是位置:相对,则可以正常工作。

这是我正在使用的代码

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?

4

1 回答 1

0

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

class="placeholder" 

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

于 2013-02-13T22:21:35.813 回答