登录  /  注册
首页 > web前端 > css教程 > 正文

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

青灯夜游
发布: 2018-11-10 17:30:23
转载
7813人浏览过

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

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

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

<input>
登录后复制
登录后复制

(placeholder)

1.png

(input style)

2.png

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

<input>
登录后复制
登录后复制

(placeholder)

3.png

(input)

4.png

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

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

<input>
登录后复制

(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提高优先级。

<input>
登录后复制

(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 &gt;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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:segmentfault 思否网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号