HTML5 input Placeholder(占位符)样式 – WEB前端开发

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

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; } /* Internet Explorer 10+ */
				:-moz-placeholder { color:#f00; } /* firefox 14-18 */
				/*  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; }
				/* 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 伪类样式还是相对丰富的。

本文被转载1次

首发媒体 Web前端开发 | 转发媒体

随意打赏

提交建议
微信扫一扫,分享给好友吧。