700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html中输入框占位符 HTML5 input Placeholder(占位符)样式

html中输入框占位符 HTML5 input Placeholder(占位符)样式

时间:2018-12-07 18:54:58

相关推荐

html中输入框占位符 HTML5 input Placeholder(占位符)样式

placeholder 属性

placeholder(占位符)在实际的应用中非常常见,主要用作提示输入内容,现代浏览器都支持:

placeholder 样式

这里网上搜索了一下 placeholder 样式相关知识,分享一下:/*all*/

::-webkit-input-placeholder{color:#f00;}

::-moz-placeholder{color:#f00;}/*firefox19+*/

:-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效果。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。