1、CSS选择器

因为每个浏览器的CSS选择器有所差异,所以需要针对每个浏览器做单独的设定。

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #999; 

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #999; 

::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #999; 

:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #999; 
}

2、textarea风格样式的代码,如下:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #636363; 

input:-moz-placeholder, textarea:-moz-placeholder { 
color: #636363; 
}

3、指定修改哪个input的placehoder属性,可以使用class

input.addCardInput::-webkit-input-placeholder{
color: #ccc;
}
input.addCardInput:-moz-placeholder{
color: #ccc;
}
input.addCardInput::-moz-placeholder{
color: #ccc;
}
input.addCardInput:-ms-input-placeholder{
color: #ccc;
}

4、在Firefox和IE里,正常input文本颜色覆盖占位符颜色的方法:

::-webkit-input-placeholder { 
color: red; text-overflow: ellipsis; 

:-moz-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 

::-moz-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
} /* for the future */ 
:-ms-input-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
}

修改input的placeholder颜色的更多相关文章

  1. 修改input属性placeholder的样式

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 修改 input / textarea placeholder 属性的颜色和字体大小

    话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; fon ...

  3. 修改Input中Placeholder默认提示颜色(兼容)

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #f00; } input:-moz-pl ...

  4. css 修改input中placeholder提示问题颜色

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(74, 87, 103, 1); ...

  5. 修改input标签placeholder文字颜色

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: ...

  6. input的placeholder颜色修改

    input[type=text]::-webkit-input-placeholder { /* WebKit browsers / color: #999; } input[type=text]:- ...

  7. h5 中修改input中 placeholder的颜色

    input::-webkit-input-placeholder{ color:blue; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ c ...

  8. 改变input的placeholder颜色

    input::-webkit-input-placeholder{ color:#666; } input::-ms-input-placeholder{ color:#666; } input::- ...

  9. 修改input 的 placeholder

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666!important; } inp ...

随机推荐

  1. Linux IPC之管道通信

    2017-04-07 管道通信在linux中使用较为频繁的进程通信机制.基于unix一切皆文件的传统,管道也是一种文件.所以可以使用一般的VFS接口对管道进行读写操作,如read.write.具体管道 ...

  2. Loki之ThreadPool

    Loki中的ThreadPool目的主要是对创建出来的线程进行复用. ThreadPool在Test而非Loki目录下,因此并非是标准Loki的组件之一,不过我们可以对其修改定制, 下面是对其源码的大 ...

  3. Linux下多线程的重要知识点

    线程属性: typedef struct { int                              detachstate;   线程的分离状态 int                   ...

  4. Spring-Spring Bean后置处理器

    Spring Bean后置处理器 BeanPostProcessor接口定义回调方法,你可以实现该方法来提供自己的实例化逻辑,依赖解析逻辑等.你也可以在Spring容器通过插入一个或多个BeanPos ...

  5. NoSQL 数据库概览及其与 SQL 语法的比较

    NoSQL数据库的产生就是为了解决大规模数据集合多重数据种类带来的挑战,尤其是大数据应用的难题. 本文对NoSQL数据库的定义.分类.特征.当前比较流行的NoSQL数据库系统等进行了简单的介绍,并对N ...

  6. How to store scaling parameters for later use

    you can use sklearn's built-in tool: from sklearn.externals import joblib scaler_filename = "sc ...

  7. Git添加本地项目出现fatal: unable to get credential storage lock: File exists

    把本地项目初始化之后上传到github上出现问题:fatal: unable to get credential storage lock: File exists 解决办法:是因为我上传用的git帐 ...

  8. Array类拓展方法

    var arr=[ {name:'one',sex:'girl',handsome:true}, {name:'two',sex:'girl',handsome:false}, {name:'thr' ...

  9. Mybatis 一对一、一对多、多对多

    一对一返回resultType <!-- 查询订单关联查询用户信息 resultType --> <select id="findOrderCustom" res ...

  10. TOSCA自动化测试工具安装

    1.下载链接 https://www.tricentis.com/software-testing-tools/ 2.免费试用14天, 弹出的页面输入邮箱地址--> 输入一堆信息-->点击 ...