有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。 
WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素

::-webkit-input-placeholder

:-moz-placeholder

::-moz-placeholder

:-ms-input-placeholder

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

  1. ::-webkit-input-placeholder { /* WebKit browsers */
  2. color: #999;
  3. }
  4. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  5. color: #999;
  6. }
  7. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  8. color: #999;
  9. }
  10. :-ms-input-placeholder { /* Internet Explorer 10+ */
  11. color: #999;
  12. }

textareas(文本框可拉伸)风格样式的代码,如下:

  1. input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  2. color: #636363;
  3. }
  4. input:-moz-placeholder, textarea:-moz-placeholder {
  5. color: #636363;
  6. }

input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定,不要打包整体处理,因为其中一个出问题,其他的都会失效。

  1. *::-webkit-input-placeholder {
  2. color: red;
  3. }
  4. *:-moz-placeholder {
  5. color: red;
  6. }
  7. *:-ms-input-placeholder {
  8. /* IE10+ */
  9. color: red;
  10. }

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

  1. ::-webkit-input-placeholder {
  2. color: red; text-overflow: ellipsis;
  3. }
  4. :-moz-placeholder {
  5. color: #acacac !important; text-overflow: ellipsis;
  6. }
  7. ::-moz-placeholder {
  8. color: #acacac !important; text-overflow: ellipsis;
  9. } /* for the future */
  10. :-ms-input-placeholder {
  11. color: #acacac !important; text-overflow: ellipsis;
  12. }

还有一种好办法:

  1. input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  2. color: #666;
  3. }
  4. input:-moz-placeholder, textarea:-moz-placeholder {
  5. color: #666;
  6. }
  7. input::-moz-placeholder, textarea::-moz-placeholder {
  8. color: #666;
  9. }
  10. input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  11. color: #666;
  12. }

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

  1. 用css修改HTML5 input placeholder颜色

    使用CSS修改HTML5 input placeholder颜色 本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和 ...

  2. 使用CSS修改HTML5 input placeholder颜色( 转载 )

    问题:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: input[placeholder], [placeholder], *[placeholder] ...

  3. 使用CSS修改HTML5 input placeholder颜色

    HTML <input type="text" placeholder="Value" /> 有三种实现方式:伪元素(pseudo-elements ...

  4. 修改HTML5 input placeholder 颜色及修改失效的解决办法

    input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写,有些显示不需要,但是在编辑器webstorm中该属性不被识别 */ ::-webkit- ...

  5. HTML5 input placeholder 颜色修改示例

    Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...

  6. HTML5 input placeholder 颜色 改动

    David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS input[placeholder], [placeholder], ...

  7. HTML5 input placeholder 颜色修改

    在开发中遇到的一个小问题,记录下来./*placehodel*/ input:-ms-input-placeholder{color:#a9a9a9;}/* Internet Explorer 10+ ...

  8. 修改HTML5 input placeholder默认颜色

    WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素 ::-webkit-input-placeholder Mozilla Firefox 4-18使用 ...

  9. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

随机推荐

  1. Linux显示一个二进制文件或可执行文件的完整路径

    Linux显示一个二进制文件或可执行文件的完整路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ which halt /sbin/halt

  2. tcp_wrapper

    介绍 对基于tcp协议开发并提供服务的应用程序,所提供的一层访问控制工具 基于库调用实现其功能 * 库名:libwrap 判断服务是否能够由tcp_wrapper进行访问控制 1. 动态编译 ldd命 ...

  3. 使用WebApiClient请求和管理Restful Api

    前言 本篇文章的内容是WebApiClient应用说明篇,如果你没有了解过WebApiClient,可以先阅读以下相关文章: WebApi client 的面向切面编程 我来给.Net设计一款Http ...

  4. WPF基础篇之连接数据库

    WPF连接DB2数据库 public void ConnectionBD2Func() { //连接数据库字符串,DB2 9.5以下版本使用Data Source=Test,否则查询找不到数据库.DB ...

  5. 浅谈java编译机制和运行机制

    源文件和字节码的组成方式 源文件: 拓展名后跟java的文件即java的源文件. Java 源码编译由以下三个过程组成: 1.分析和输入到符号表 2.注解处理 3.语义分析和生成class文件 流程图 ...

  6. luoguP2711 小行星

    题目描述 星云中有n颗行星,每颗行星的位置是(x,y,z).每次可以消除一个面(即x,y或z坐标相等)的行星,但是由于时间有限,求消除这些行星的最少次数. 输入输出格式 输入格式: 第1行为小行星个数 ...

  7. [BZOJ1046] [HAOI2007] 上升序列 (dp)

    Description 对于一个给定的S={a1,a2,a3,…,an},若有P={ax1,ax2,ax3,…,axm},满足(x1 < x2 < … < xm)且( ax1 < ...

  8. 小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

    本来呢,我是有专门整理小程序恶心bug的文章的,每次只要添加汇总就好, 但是呢,鉴于这个问题的恶心程度,所以我把他单独拿出来说了. ---------------------------------- ...

  9. app图标icon大全

    http://tool.58pic.com/tubiaobao/index.php?m=Index&a=ui&p=2 很有用,下载没用,直接右键吧.

  10. linux下线程的两种封装方式

    在网络编程的时候往往需要对Linux下原生的pthread库中的函数进行封装,使其使用起来更加方便,封装方法一般有两种:面向对象和基于对象,下面将分别介绍这两种方式,最后统一分析这两种方式的优缺点: ...