CSS修改placeholder样式的方法介绍(代码示例)


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家带来的内容是CSS修改placeholder样式的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置:

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

1

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

(placeholder)

1.png

(input style)

2.png

可以发现,placeholderinput的默认颜色是有点区别的。现在我们来修改input 的颜色

1

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

(placeholder)

3.png

(input)

4.png

不难发现color属性只能改变输入值的颜色,placeholder的颜色没人任何变化。so,如何来改变placeholder的颜色。

要改变placeholder的颜色就要使用到伪类::placeholder

1

2

3

4

5

6

<style>

    input::placeholder {

        color: green;

    }

</style>

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

(placeholder)

5.png

(input)

6.png

需要注意的是::palceholder伪类的兼容性,以上是在chrome浏览器的运行结果,同样的代码在IE11中就成了这样

(placeholder - ie11)

7.png

(input - ie11)

8.png

IE解决方案:

首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且属性需要加上!important提高优先级。

1

2

3

4

5

6

<style>

    input:-ms-input-placeholder {

        color: green !important;

    }

</style>

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

(placeholder ie11)

9.png

(input ie11)

10.png

阅读剩余部分

相关阅读 >>

css如何实现边框长度控制功能

css怎么让盒子并排显示

css怎么让滚动条隐藏

js怎么修改css属性

css复合样式怎么做

css怎么去掉div间距

css设置文字删除线

如何用html显示分割

html怎么隐藏控件

html css怎么隐藏滚动条

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...