CSS修改placeholder样式的方法是什么

这篇文章主要介绍CSS修改placeholder样式的方法是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联专注于屯昌企业网站建设,自适应网站建设,商城网站定制开发。屯昌网站建设公司,为屯昌等地区提供建站服务。全流程定制网站，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

项目用经常遇到修改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样式的方法是什么的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

文章题目：CSS修改placeholder样式的方法是什么
分享路径：https://www.cdcxhl.com/article32/gdgesc.html

成都网站建设公司_创新互联，为您提供定制开发、静态网站、外贸网站建设、小程序开发、网站制作、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联