争怎路由网/网站教程/内容

CSS更改placeholder样式的方法介绍（代码示例）

网站教程2022-11-08 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是CSS修改placeholder样式的方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

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

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

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

(placeholder)

1.png

(input style)

2.png

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

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

(placeholder)

3.png

(input)

4.png

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

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

<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提高优先级。
<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
之后给出其他浏览器的适配方案
/* - 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样式的方法介绍（代码示例）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:CSS更改placeholder样式的办法介绍（代码示例）
 
相关阅读