今天在群里看到群友问了一个这样的问题,就是如何更改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. 用java来实现验证码功能(本帖为转载贴),作为个人学习收藏用

    一.关于为何使用验证的解释 在目前的网页的登录.注册中经常会见到各种验证码.其目的便是为了:防止暴力破解  .因为只要CPU性能较强,便可以在慢慢尝试密码的过程中来破解用户账号,因而导致的结果是用户信 ...

  2. DDD理论学习系列(6)-- 实体

    DDD理论学习系列--案例及目录 1.引言 实体对应的英语单词为Entity.提到实体,你可能立马就想到了代码中定义的实体类.在使用一些ORM框架时,比如Entity Framework,实体作为直接 ...

  3. Hadoop hdfs完全分布式搭建教程

    1.安装环境 ①.四台Linux CentOS6.7 系统 hostname                ipaddress              subnet mask             ...

  4. CoreAnimation学习,学习总结,记录各种过程中遇到的坑

    1. CAAimation  的 duration = 0 的时候, 这个时候就相当于没有动画了. 2. CAKeyframeAnimation *rotateAnimation = [CAKeyfr ...

  5. 警告: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:JsonBlog' did not find a matching property.

    这个问题困扰很久了,逛了很多论坛,终于得以解决 我的控制台错误如下: 五月 , :: 下午 org.apache.catalina.startup.VersionLoggerListener log ...

  6. [0] DDD领域驱动设计(二) 之 值对象

    DDD中实体对象与值对象的解释比较抽象.主要根据持续性与 ID 识别来区分. ID并非某一对象的直观自然属性,而是在分析建模之 后,赋给模型中的实体类,来达到跟踪,区别,存储目的的一个特值. 结合项目 ...

  7. SICIP-1.3-Defining a new function

    定义函数 def <name> (former parament): 函数体(缩进) 环境 全局环境 局部环境 只在函数内部有效 TIP 函数体只在调用的最后执行 抽象化函数 函数域(函数 ...

  8. js 过滤敏感词 ,可将带有标点符号的敏感词过滤掉

    function transSensitive(content) { // var Sensitive = H.getStorage("Sensitive");//敏感词数组 va ...

  9. Java学习笔记--监视目录变化

    1.在实际开发中可能会需要监视某个目录下的文件所发生的变化.   2.在java7之前的做法 在一个独立的线程中使用File类的listFiles方法来定时检查目录中的内容,并与之前的内容进行比较   ...

  10. python 导入informixdb模块

    最近碰到Linux平台使用python连接informixdb数据库的问题.整理如下: 1.安装 informixdb 下载InformixDB-2.5.tar.gz 解压之后,在README文档下看 ...