今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下。

  熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)

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

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

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

  placeholder的用法,举例:

   <input type="text" placeholder="请输入您要搜索的内容!">

  结果:

  

  该提示文字会有自己默认的颜色,然而有时候,我们并不希望用该默认颜色,而是想自定义颜色。那么该怎么处理呢?不废话,上代码。 

<style>
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
</style>

  针对不同浏览器或不同版本的浏览器会有不同的写法,会添加相应的前缀。

  注意:

  1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号

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

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

  

  特别强调:冒号与双冒号的问题

HTML5之placeholder属性以及如何更改placeholder属性中文字颜色的更多相关文章

  1. 如何更改placeholder属性中文字颜色

    如何更改placeholder属性中文字颜色 placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会 ...

  2. 转: HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  3. 更改NavigationView侧滑菜单文字颜色

    NavigationView menu默认icon和title会随着菜单状态改变而改变,选择某个菜单后再次打开侧边菜单后会发现该菜单的icon和title会变成应用的主颜色,其他菜单项仍然为黑色. 如 ...

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

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

  5. placeholder是H5的一个新属性,但是在IE9以下是不支持的

    $(function() { // 如果不支持placeholder,用jQuery来完成 if(!isSupportPlaceholder()) { // 遍历所有input对象, 除了密码框 $( ...

  6. 有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除

    (一)placeholder 属性起到提示客户输入信息作用 (二)ie9以下出问题了 placeholder不支持 (三)解决办法 先贴html 加上jquery代码就可以了 关于表单获取焦点,chr ...

  7. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  8. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

  9. html5新添加的表单类型和属性

    email类型: <input type="email"> url类型: <input type="url"> date类型: < ...

随机推荐

  1. 写JS自执行函数时要注意的

    JS是非强类型语言,且IDE也不够智能,所以经常会在语句结束时漏写了分号,一般情况下这是不影响运行的, 但如果后面跟上的是一段自执行的函数,就会报出 "..... is not functi ...

  2. 透过源码看看Redis中如何计算QPS

    通常我们采集Redis的性能数据时,或者想要知道Redis当前的性能如何时,需要知道这个实例的QPS数据,那么这个QPS数据是如何计算的呢?我们都有哪些办法或者这个QPS ? QPS顾名思义就是每秒执 ...

  3. 零基础开始学python

    变量规则:在python中变量名不能有特殊字符和数字开头以及python里的一些关键字,可以使用下划线开头,在python里,变量是支持使用中文的,但尽量不要使用中文,为什么?因为这样会让你看起来太l ...

  4. Jenkin-持续集成

    1.Jenkins安装 本文将会介绍如何在windows 中安装Jenkins,并且使用Jenkins进行项目的构建. 首先我们进入到Jenkins 的官网下载地址:https://jenkins.i ...

  5. java hascode

    有部分代码如下: Cat cat=new Cat("Kitty",2);system.out.println(cat):问题:输出什么? 调用并执行toString()方法,两种情 ...

  6. Advice详解

    1.前置增强 BeforeAdvice是前置增强的接口,方法前置增强的MethodBeforeAdvice接口是其子类, MethodBeforeAdvice接口仅仅定义了唯一的方法:before(M ...

  7. CYQ.Data V5 分布式自动化缓存设计介绍(二)

    前言: 最近一段时间,开始了<IT连>创业,所以精力和写的文章多数是在分享创业的过程. 而关于本人三大框架CYQ.Data.Aries.Taurus.MVC的相关文章,基本都很少写了. 但 ...

  8. Selenium chrome配置代理Python版

    环境: windows 7 + Python 3.5.2 + Selenium 3.4.2 + Chrome Driver 2.29 + Chrome 58.0.3029.110 (64-bit) S ...

  9. RocksDB上锁机制

    RocksDB作为一个开源的存储引擎支持事务的ACID特性,而要支持ACID中的I(Isolation),并发控制这块是少不了的,本文主要讨论RocksDB的锁机制实现,细节会涉及到源码分析,希望通过 ...

  10. ASP.NET Core 2.0 SignalR 示例

    # 一.前言 上次讲SignalR还是在<[在ASP.NET Core下使用SignalR技术](http://dotnet.ren/2017/02/21/%E5%9C%A8ASP-NET-Co ...