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

注:

  适用范围:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

  因为是HTML5中新增的属性,所以会存在兼容性问题。下面说说浏览器的支持情况:

  IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 属性。IE9及以下版本不支持input的placeholder属性。

关于改变placeholder的颜色的更多相关文章

  1. 怎么改变 placeholder字体颜色

    ::-webkit-input-placeholder{color: #888}::-moz-placeholder{color: #888}:-moz-placeholder{color: #888 ...

  2. 如何改变placeholder的颜色

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...

  3. CSS改变placeholder的颜色

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #a1a1a1; } ::-moz-placeholder { /* Mozilla ...

  4. 输入框改变placeholder字体颜色

    ::-webkit-input-placeholder {  color: red;}:-moz-placeholder {  color: red;}::-moz-placeholder{color ...

  5. [BS-19]更改UITextField的placeholder文字颜色的5种方法

    更改UITextField的placeholder文字颜色的5种方法 想要达到的目标是:一个页面上有多个UITextField,当用户聚焦某textField时,该文本框的placeholder的文字 ...

  6. 前端福利之改变placeholder颜色的方法(转)

    之前拿到一个设计图,Placeholder是白色的,所以就查看了一下改变placeholder的方法: input::-webkit-input-placeholder { /* WebKit bro ...

  7. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  8. placeholder插件及placeholder默认颜色修改

    $.fn.placeHolder = function(){ $(this).each(function(i, el) { var self = $(el); if ($.browser.msie & ...

  9. 【css】修改placeholder 默认颜色

    html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder=" ...

随机推荐

  1. [转] CentOS下添加用户并且让用户获得root权限

    http://www.centoscn.com/CentOS/config/2014/0810/3471.html 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser ...

  2. 操作系统管理CPU的直观想法

    CPU的工作原理 要想管理CPU,就要先学会如何使用CPU.我们先从一个程序的执行来看看CPU是如何工作的. void main(){ int i , sum; ; i < ; i++){ su ...

  3. 【XShell】xshell 中“快速命令集”的使用

    突然看到朋友的xshell比我多一个按钮,且一点,哈哈哈 ,实现了很炫酷的功能,耐不住好奇,问了一句,原来是快速命令集! 1.选择快速命令集(两种方法a&b) a:文件 > 属性 > ...

  4. PowerDesigner从SqlServer数据库导入数据模型

    Powerdesigner 从数据库导入数据 第一步, 打开 powerdesigner, 在菜单选择 [File] 选项, 然后在弹出的下拉单中选择 [Reverse Engineer]选项,再选择 ...

  5. 9、搜索 :ion-searchbar

    /* ---html----*/ <ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event ...

  6. hibernate注解JPA

    1.JPA与hibernate 什么是JPA ? java persistence api :java持久化api,同一的ORM规范,是由sun公司指定的规范接口,hibernate实现了JPA规范. ...

  7. 认识Spring AOP

    Spring AOP AOP是Aspect/'æspekt/ Oriented/ɔːrɪentɪd/ Programming的缩写,意为:面向切面编程. 是什么 通过预编译方式和运行期动态代理实现程序 ...

  8. Linux防火墙命令

    linux 查看防火墙状态   1.查看防火墙状态 systemctl status firewalld firewall-cmd --state #查看默认防火墙状态(关闭后显示notrunning ...

  9. IDEA安装及破解永久版教程————鹏鹏

    ---恢复内容开始--- 首先我们先来介绍下什么是IDEA? IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具之一,尤 ...

  10. 使用Spring的AOP实现切面日志

    AOP切面日志的使用方式 @Aspect @Component public class HttpAspect { private static final Logger logger = Logge ...