井井客

搜索

如何修改placeholder表单预期值的颜色

placeholder是html5中为表单新增的属性,本身它显示的颜色就是较正常颜色偏淡,但是也不泛有童鞋想将它换种颜色试试。

如何修改placeholder表单预期值的颜色

以前我们会使用value="请输入用户名"并通过Js点击获取焦点来让这段文字消失,现在我们只需使用placeholder="请输入用户名"而不需要添加任何JS就可以达到原来的目的。

而placeholder本身也很贴心的会将“请输入用户名”的颜色变浅,当然根据不同的环境,实际应用中也会有需要自定义颜色的情况。其实代码很简单,如下:

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

不过placeholder属性本身兼容还是略差些的,因为我主要用在手机浏览器中,所以用到的是上面这段,而比较全的则是下面的:

input::-webkit-input-placeholder {color:#F30;}
input:-moz-placeholder {color:#F30;}
input::-moz-placeholder {color:#F30;}
input:-ms-input-placeholder {color:#F30;}

需要注意的是placeholder权适用于input表单类型中的text、search、url、telephone、email及password。

文章TAG:HTML5

作者:井井客原创来源:原创
本文标题:如何修改placeholder表单预期值的颜色
本文链接:/c/29160.html

上一篇:去除表单元素默认样式
下一篇:原生JS实现倒计时10分钟

文章分类

相关阅读

随便看看