我在 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?