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. etcd: request cluster ID mismatch错误解决【只适用于新建etcd集群或无数据集群】

    1.报错信息 Mar 29 05:45:31 xxx etcd: request cluster ID mismatch (got 414f8613693e2e2 want cdf818194e3a8 ...

  2. Python下的正则表达式原理和优化笔记

    摘要: 本文旨在总结一些编写表达式的技巧和原理.鉴于介绍python中re模块的使用方法的文章太多.所以本文在基础方面都是略过,而在回溯原理和一些技巧方面记录一点点学习总结. 目录:[ - ] 基础规 ...

  3. 我与前端之间不得说的三天两夜之css基础

    前端基础之CSS CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... ...

  4. Element 中表单非必填数据项 必须为数字的验证问题

    Element-ui 的el-form组建中,自带基本的验证功能,比如某些项必填的验证,直接加入rules 规则中即可,如下实例: 在页面中书写如下: <el-form-item label=& ...

  5. Java语法糖设计

    语法糖 Java语法糖系列,所以首先讲讲什么是语法糖.语法糖是一种几乎每种语言或多或少都提供过的一些方便程序员开发代码的语法,它只是编译器实现的一些小把戏罢了,编译期间以特定的字节码或者特定的方式对这 ...

  6. HDU - 2204 Eddy's爱好 (数论+容斥)

    题意:求\(1 - N(1\le N \le 1e18)\)中,能表示成\(M^k(M>0,k>1)\)的数的个数 分析:正整数p可以表示成\(p = m^k = m^{r*k'}\)的形 ...

  7. Linux树莓派中/etc/rc.local不执行的问题

    最近研究在树莓派中嵌入式开发java程序,并打算和Salesforce进行通信.需要开发一个java的web server,不想弄那么复杂,于是打算在linux系统中/etc/rc.local写想要执 ...

  8. 安卓 Activity 生命周期

    创建到销毁的生命周期: onCreate()->onStart()->onResume()->onPause->onStop->onDestroy 启动到前台在到后台的生 ...

  9. PHP开发之apache mac上配置

    我使用的Mac OS X版本是10.8.2,Mac自带了Apache环境. 启动Apache 设置虚拟主机 启动Apache 打开“终端(terminal)”,输入 sudo apachectl -v ...

  10. Linux中find

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...