话不多说,直接上代码:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #666;
font-size: 16px;
}
input::-moz-placeholder,
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #666;
font-size: 16px;
}
input:-moz-placeholder,
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #666;
font-size: 16px;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #666;
font-size: 16px;
}

注意:

  1、WebKit, Blink, Edge 浏览器等需要带上 -webkit- 前缀,且是双冒号,写的时候还要带上input

  2、针对火狐浏览器则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高版本的使用双冒号(::);要点2:火狐浏览器不需要像webkit内核那样要带上input。

  3、由于 placeholder 属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input

特别强调:冒号与双冒号的问题,还有是否需要加上input

不用CSS得到同样效果的方法:

<input type="text" value="placeholder text" onfocus="this.style.color='#000';this.value='';" style="color: #f00;"/>

这个方法也不是很友好,当内容输入一半若点击到文本框外的地方,再重新输入的时候,前面输入的内容为空了 o'o 所以还是少用吧~~

修改 input / textarea placeholder 属性的颜色和字体大小的更多相关文章

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

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

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

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

  3. 修改input的type属性

    在ff和chrome中是可以直接修改input的type属性的,但是在ie下面是不允许的. 用jquery 的attr方法去修改,在jquery1.8.3版本会直接抛出异常,但在1.9及以上版本就不再 ...

  4. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  5. JQuery中如何动态修改input的type属性

    代码如下: jQuery(".member_id").focus(function() { jQuery(this).val(''); }).blur(function() { i ...

  6. ie8下修改input的type属性报错

    摘要: 现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做 ...

  7. Hmtl5 <input>中placeholder属性(新属性)

    Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...

  8. UILabletext去掉乱码 控制颜色 行高 自定义大小 。显示不同的字体颜色、字体大小、行间距、首行缩进、下划线等属性(NSMutableAttributedString)

    text去掉乱码 设置不同颜色 行高 自定义大小 #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @ ...

  9. 修改input的placeholder颜色

    1.CSS选择器 因为每个浏览器的CSS选择器有所差异,所以需要针对每个浏览器做单独的设定. ::-webkit-input-placeholder { /* WebKit browsers */ c ...

随机推荐

  1. JGit 切换分支

    //gitDir是git仓库的根目录,这个仓库必须是已clone好了 File file = new File(gitDir); Git git = Git.open(file); //切换分支, i ...

  2. 【速读】——Shangxuan Tian——【ICCV2017】WeText_Scene Text Detection under Weak Supervision

    Shangxuan Tian——[ICCV2017]WeText_Scene Text Detection under Weak Supervision 目录 作者和相关链接 文章亮点 方法介绍 方法 ...

  3. C#中的委托(delegate)(个人整理)

    Delegate 一.什么是委托? 委托是一种引用类型,它是函数指针的托管版本.在C#中,委托是一种可以把引用存储为函数的类型.委托可以引用实例和静态方法,而函数指针只能引用静态方法.委托的声明非常类 ...

  4. IDEA SpringBoot 打包(jar)

    项目结构: sf-xxx-api sf-xxx-domain sf-xxx-common sf-xxx-web (web模块) 期望输出结果目录 bin/server.sh libs/**.jar,* ...

  5. IP通信基础学习第三周(下)

    TTL的最值是255. 数据部分不参与检验和的计算. 接收端的结果若为0,则保留:否则,会丢弃该数据报. IP数据报选项字段是可选的,主要用于网络测试和调试. IP辅助协议ICMP的消息类型有错误消息 ...

  6. ts --基础类型

    声明js的基本类型1.数字let a: number = 2; 2.字符串let aa: string = "22" 3.数组 (1) 数组元素: let b: number[] ...

  7. 目标URL存在跨站漏洞和目标URL存在http host头攻击漏洞处理方案

    若需要学习技术文档共享(请关注群公告的内容)/讨论问题 请入QQ群:668345923 :若无法入群,请在您浏览文章下方留言,至于答复,这个看情况了 目录 HTTP协议详解 引言 一.HTTP协议详解 ...

  8. Node.js基础学习三之登录功能

    本篇介绍Node.js访问数据库并返回数据给客户端 需求基于Node.js学习(二) 数据库请下载:user.sql 1.创建user 实体类(model-user.js) function User ...

  9. 【模板】ST表

    给定一个长度为 \(N\) 的数列,和 \(M\) 次询问,求出每一次询问的区间\([l,r]\)内数字的最大值. 说明 对于30%的数据,满足: \(1 \leq N, M \leq 10 , 1≤ ...

  10. 996.ICU与死亡因素

    昨天,我为996.ICU这场国际运动贡献了一颗星. 关于这件事,第一想到的就是我们工作的初心是为了更好的生活,工作扼杀生活的不良风气应该坚决抵制. 查了一下,近些年人类正常死亡原因中排名前三的原因为: ...