这篇“HTML5中怎么用placeholder美化input背景提示文字”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML5中怎么用placeholder美化input背景提示文字”文章吧。
CSS代码
在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同,但相信以后会统一。
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; }
:-ms-input-placeholder { color:#f00; }
input:-moz-placeholder { color:#f00; }
#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; }
#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; }
其实只是一句代码,但为了实现范围最广的浏览器支持,加上了各自的浏览器引擎前缀(Vendor Prefix),一下子变成了10几行代码,希望这种情况会尽快的过去。
一些基本的CSS样式你都可以使用在placeholder上——颜色,字体,字体样式等。你可以还可以创造更复杂的样式,比如用GIF动画。
以上就是关于“HTML5中怎么用placeholder美化input背景提示文字”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。