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. swagger接口变动监控

    版本与版本之间迭代,总会发生接口的变化,而这些变化开发不会都告诉测试,测试需要把全部接口检查一遍,这样就降低了测试效率. 为了解决这个问题,结合公司实际项目进行了以下设计: 1.对比测试环境swagg ...

  2. DNS 知识点

    总结: DNS解析过程:主机查看本地缓存,然后向本地域名服务器进行递归查询,本地域名服务器向根,顶级,权限进行迭代查询   DNS 解析过程: 1.查看浏览器缓存 2.查看os缓存         w ...

  3. OpenCV膨胀与腐蚀

    膨胀与腐蚀 本篇博客主要介绍使用OpenCV中的函数接口实现对一个图片的腐蚀或者膨胀,听起来有点像是对图像进行放大和缩小的意思,如果你也是这样认为,那我只能说你跟我一样肤浅!!在OpenCV中几乎所有 ...

  4. sql server 复制表从一个数据库到另一个数据库

    sql server 复制表从一个数据库到另一个数据库 /*不同服务器数据库之间的数据操作*/ --创建链接服务器 exec sp_addlinkedserver 'ITSV ', ' ', 'SQL ...

  5. mysql时间戳转换成可读时间格式

    代码: SELECT FROM_UNIXTIME(1234567890, '%Y-%m-%d %H:%i:%S') 附:在mysql中,一个时间字段的存储类型是int(11),怎么转化成字符类型,比方 ...

  6. SSIS 2012 Error: An Integration Services class cannot be found

    升级SSIS到SQL Server 2012,服务器只安装了SSIS一个功能,应用程序执行dtsx包时报错如下: An Integration Services class cannot be fou ...

  7. 粗略介绍Java AQS的实现原理

    本文转自 http://www.importnew.com/24006.html 感谢作者 对我很有帮助 ①引言 AQS是JDK1.5提供的一个基于FIFO等待队列一个同步器的基础框架,java中的同 ...

  8. UI自动化测试框架之Selenium关键字驱动 (转)

    摘要 自动化测试框架demo,用关键字的形式将测试逻辑封装在数据文件中,测试工具解释这些关键字即可对其应用自动化 一.原理及特点 1.   关键字驱动测试是数据驱动测试的一种改进类型 2.    主要 ...

  9. centos配置jdk的环境变量

    1.首先呢,centos下的JDK环境配置分两种情况,一直是root用户级别的jdk配置,另一种是其他用户组级别的配置.这里讲解的是root用户级别的配置. 我们已经下载解压好了jdk的目录.如下 2 ...

  10. 使用selenium前学习HTML(3)— 属性

    <!-- HTML标签可以拥有属性,属性提供元素的更多的信息: 属性总是以名称/值对的形式出现,比如:name="value". 属性总是在 HTML 元素的开始标签中规定. ...