在阅读一篇关于HTML5的文章时,我想到了一个问题:虽然占位符在表单中非常有用,但如果不能在没有JavaScript的情况下使用CSS来定位它们,那么这只是迈出的一小步。
那么我能否通过CSS对占位符进行定位并使其与输入的文本不同呢?
那么我能否通过CSS对占位符进行定位并使其与输入的文本不同呢?
Webkit 使用 ::-webkit-input-placeholder 伪元素。Moz 使用 :-moz-placeholder 伪类。
<input type="text" name="name" />
相应的 CSS 代码如下:
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: blue;
}
input::-moz-placeholder { /* Firefox 19+ */
color: blue;
}
input:-ms-input-placeholder { /* IE 10+ */
color: blue;
}
input:-moz-placeholder { /* Firefox 18- */
color: blue;
}
input:placeholder {
color: blue;
}
我也鼓励你去看一下
input:placeholder-shown {
border: 5px solid red;
}
这是一个好的资源。