CSS修改placeholder样式的方法介绍(代码示例)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS修改placeholder样式的方法介绍(代码示例),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2052字,纯文字阅读大概需要3分钟。
内容图文
![CSS修改placeholder样式的方法介绍(代码示例)](/upload/InfoBanner/zyjiaocheng/411/3957120bb9574b25bcb2cbd9a964d261.jpg)
项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置:
首先来看一下chrome默认的input样式
<input type="text" placeholder="hello world">
(placeholder)
(input style)
可以发现,placeholder
和input
的默认颜色是有点区别的。现在我们来修改input
的颜色
<input type="text" placeholder="hello world" style="color: red">
(placeholder)
(input)
不难发现color
属性只能改变输入值的颜色,placeholder
的颜色没人任何变化。so,如何来改变placeholder
的颜色。
要改变placeholder
的颜色就要使用到伪类::placeholder
<style> input::placeholder { color: green; } </style> <input type="text" placeholder="hello world" style="color: red;">
(placeholder)
(input)
需要注意的是::palceholder
伪类的兼容性,以上是在chrome浏览器的运行结果,同样的代码在IE11中就成了这样
(placeholder - ie11)
(input - ie11)
IE解决方案:
首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder
,并且属性需要加上!important
提高优先级。
<style> input:-ms-input-placeholder { color: green !important; } </style> <input type="text" placeholder="hello world" style="color: red;">
(placeholder ie11)
(input ie11)
之后给出其他浏览器的适配方案
/* - Chrome ≤56, - Safari 5-10.0 - iOS Safari 4.2-10.2 - Opera 15-43 - Opera Mobile >12 - Android Browser 2.1-4.4.4 - Samsung Internet - UC Browser for Android - QQ Browser */ ::-webkit-input-placeholder { color: #ccc; font-weight: 400; } /* Firefox 4-18 */ :-moz-placeholder { color: #ccc; font-weight: 400; } /* Firefox 19-50 */ ::-moz-placeholder { color: #ccc; font-weight: 400; } /* - Internet Explorer 10–11 - Internet Explorer Mobile 10-11 */ :-ms-input-placeholder { color: #ccc !important; font-weight: 400 !important; } /* Edge (also supports ::-webkit-input-placeholder) */ ::-ms-input-placeholder { color: #ccc; font-weight: 400; } /* CSS Working Draft */ ::placeholder { color: #ccc; font-weight: 400; }
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
以上就是CSS修改placeholder样式的方法介绍(代码示例)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS修改placeholder样式的方法介绍(代码示例)全部内容,希望文章能够帮你解决CSS修改placeholder样式的方法介绍(代码示例)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。