话不多说,直接上代码:

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. Dungeon Master (广搜)

    问题描述: You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is composed ...

  2. react16实战总结

    实战总结 react实战基础 遇到的一些坑 li里要带key值否则会警告,这个问题在vue中也存在, 考虑到虚拟DOM中diff,所以不要用index作为key值,而要用item. 2.immutab ...

  3. python 开发练习之 监控

    本节内容 为什么要做监控? 常用监控系统设计讨论 监控系统架构设计 监控表结构设计 为什么要做监控? –熟悉IT监控系统的设计原理 –开发一个简版的类Zabbix监控系统 –掌握自动化开发项目的程序设 ...

  4. 搭建rsync服务并同步重要数据

    在主备机器上均安装rsync,在主机上以daemon的模式启动,在备机上定时执行同步命令.安装rsync的命令如下: 1.下载安装包(主备机均执行) [root@localhost home]# wg ...

  5. jenkins+git+maven

    这个有参考:https://blog.csdn.net/xlgen157387/article/details/50353317 主要针对一些错误记录一下 1.如果要不想用系统的jdk等,可以在全局工 ...

  6. Git随笔 -- 初始化远程仓库

    1. 新建文件夹(作为本地仓库与之远程仓库关联),进入文件夹空白处右键选择Git Bash(安装程序下载).[或者在开始菜单里找到Git Bash并打开,使用命令进入文件夹:cd 文件夹名称.] 2. ...

  7. ltp-ddt nor qspi spi调试中需要修改的地方

    1 blk_device_dd_readwrite_test.sh before SRC_FILE="/home/root/srctest_file_${DEVICE_TYPE}_$$&qu ...

  8. flutter -webview 报错 err_cleartext_not_permitted

    文件 android\app\src\main\AndroidManifest.xml <manifest xmlns:android="http://schemas.android. ...

  9. 使用Semaphore同步,经典银行账户问题

    1.新建Account类,使用Semaphore同步增加和减少金额方法. package com.xkzhangsan.semaphorepack.bank; import java.util.con ...

  10. 【题解】Luogu P5251 [LnOI2019]第二代图灵机

    原题传送门 前置芝士:珂朵莉树 珂朵莉树的主要功能是区间赋值 这道题还算明显(操作2) 一开始看见这题觉得很毒瘤,但仔细想想发现颜色和数字之间没有什么关系 我们一共要维护三个东西: 1.区间和:树状数 ...