CSS如何修改placeholder样式

CoderBear 发布于2019-08-29 17:13 / 564人阅读

摘要：项目用经常遇到修改的的颜色的需求，这里来看一下如何用设置原文发布与我的个人博客首先来看一下默认的样式可以发现，和的默认颜色是有点区别的。现在我们来修改的颜色不难发现属性只能改变输入值的颜色，的颜色没人任何变化。

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

原文发布与我的个人博客>>

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

(placeholder)

(input style)

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

(placeholder)

(input)

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

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

(placeholder)

(input)

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

(placeholder - ie11)

(input - ie11)

IE解决方案:

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

(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;
}

云服务器 GPU云服务器 css样式页面css样式 css的样式 css样式代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114182.html

CSS如何修改placeholder样式

摘要：项目用经常遇到修改的的颜色的需求，这里来看一下如何用设置原文发布与我的个人博客首先来看一下默认的样式可以发现，和的默认颜色是有点区别的。现在我们来修改的颜色不难发现属性只能改变输入值的颜色，的颜色没人任何变化。项目用经常遇到修改input的placeholder的颜色的需求，这里来看一下placeholder如何用css设置: 原文发布与我的个人博客>> 首先来看一下chrome默认...

maochunguang 2019-08-02 11:58 评论0 收藏0
【CSS练习】IT修真院--练习4-移动端界面

摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一任务四、一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求：header扩展性 & 顶栏固定进行p...

kun_jian 2019-08-29 15:39 评论0 收藏0
对移动端兼容适配的分析

摘要：一思考在移动端越来越重要的背景下，每位开发者对移动适配都有自己的想法。这个和移动端的设计体验方式是比较像的。对移动端的特殊性进行适配，如问题，默认样式等。一、思考在移动端越来越重要的背景下，每位web开发者对移动适配都有自己的想法。是移动优先，还是PC优先，还是两者兼得？在实际开发中这个问题是和项目产品定位有关的，也涉及到UI的设计，不是开发者能决定。但不管产品如何定位，作为开发...

huashiou 2019-08-02 15:22 评论0 收藏0
使用Sass来写OOCSS

摘要：自从年提出以来。它就成为一个领先的模块系统，用来组织你的代码方式之一。换句话说，你的样式中尽量不要使用标签或者标识符。我们必须使用来创建对象，通过在类中调用，将其合在一起。如果你不在刻意在中追求语义化，你仍然可以使用。自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统，用来组织你的CSS代码方式之一。 ...

Carl 2019-08-28 18:03 评论0 收藏0