HTML5 input Placeholder(占位符)样式
placeholder(占位符)在实际的应用中非常常见,主要用作提示输入内容,现代浏览器都支持
placeholder 属性
placeholder(占位符)在实际的应用中非常常见,主要用作提示输入内容,现代浏览器都支持:
<input placeholder="搜索" type="text">
placeholder 样式
这里网上搜索了一下 placeholder 样式相关知识,分享一下:
/* all */ ::-webkit-input-placeholder { color:#f00; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f00; } /* ie */ input:-moz-placeholder { color:#f00; } /* individual: webkit */ #field2::-webkit-input-placeholder { color:#00f; } #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* individual: mozilla */ #field2::-moz-placeholder { color:#00f; } #field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
你可以控制placeholder文字的字体、颜色和风格。你甚至可以将文本框的placeholder以动画方式显示。 美化你的文本框都是些看起来很小的事情,但对于一些交互式的网站来说,成功的关键就在于细节。现在IE10里也只支持placeholder了,相信越来 越多的人会使用这种原生的placeholder效果。
很赞哦! ( 0
)