修改input的placeholder样式

最新推荐文章于 2024-04-18 15:39:08 发布

原创最新推荐文章于 2024-04-18 15:39:08 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用CSS修改HTML中input元素的placeholder颜色，包括针对不同浏览器的兼容性解决方案，如Chrome、Firefox、IE等。

input为行内块元素，常用样式有：

outline-style: none ;  /*清除 输入时 粗边框（蓝色默认）样式*/
border-style: none;  /*取消默认边框（黑色默认）*/

除此之外，项目用经常遇到修改input的placeholder的颜色的需求，这里来看一下placeholder如何用css设置。

首先来看一下chrome默认的input样式:

<input type="text" placeholder="hello world">

可以发现，placeholder和input的默认颜色是有点区别的。现在我们来修改input的颜色:

<input type="text" placeholder="hello world" style="color: red">

不难发现color属性只能改变输入值的颜色，placeholder的颜色没人任何变化。so，如何来改变placeholder的颜色。要改变placeholder的颜色就要使用到伪类::placeholde

<style>
    input::placeholder {
        color: green;
    }
</style>
<input type="text" placeholder="hello world" style="color: red;">

需要注意的是::palceholder伪类的兼容性，以上是在chrome浏览器的运行结果。

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;">

之后给出其他浏览器的适配方案

/* - 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;
}