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

  今天在群里看到群友问了一个这样的问题,就是如何更改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-前缀,且是双冒号,写的时候还要带上input

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

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

  

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

时间: 2024-11-03 20:59:41

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

更改android actionbar tab文字颜色

1 在res/values/colors.xml <color name="text_tab_selected">#000000</color> <color name="text_tab_unselected">#886C2A</color> 2 /res/color 定义文件 tab.xml <?xml version="1.0" encoding="utf-8"?&g

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

更改UITextField的placeholder文字颜色的5种方法 想要达到的目标是:一个页面上有多个UITextField,当用户聚焦某textField时,该文本框的placeholder的文字会灰色变为白色,当文本框失去焦点时,placeholder颜色从白色再变回灰色. 1.放置UILabel 最简单最笨的方法是在每个textField里放一个UILabel来充当placeholder,当该textField聚焦时,让placeholder的文字会灰色变为白色,失焦后从白色再变回灰色.

HTML5 与 HTML4 的区别(3) - 新增的属性和废除的属性

表单相关的属性 新增与表单相关的属性如下: 可以对 input(type=text).select.textarea 与 button 标签指定 autofocus 属性.它以指定属性的方式让标签在画面打开时自动获得焦点. 可以对 input(type=text) 与 textarea 标签指定 placeholder 属性,它会对用户的输入进行提示,提示用户可以输入的内容. 可以对 input.output.select.textarea.button 与 fieldset 指定 form 属

HTML5初探——新增的表单元素和属性

HTML5初探--新增的表单元素和属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 { text-align: center; } input { width: 4

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

HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 { text-align: center; } input { width: 45

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

关于placeholder中 文字添加换行 用转义字符&amp;#13;&amp;#10;代替&lt;br&gt;

今天遇到一个问题 UI给的效果图中 文本域的提示文字 是两行显示, 于是就想到placeholder中能否解析html标签, 尝试后发现并无卵用, 经过调查后发现 可以用转义字符代替<br> 表示回车 表示换行 <textarea rows="10" placeholder="要夸奖? 想吐槽? 给建议? 有话说? 通通写下来吧,我们将努力为您提供更好的服务!"></textarea> 效果如下: 关于placeholder中 文

placeholder文字颜色与是否显示兼容性

1.ie显示问题 <script type="text/javascript"> $(document).ready(function(){ var doc=document, inputs=doc.getElementsByTagName('input'), supportPlaceholder='placeholder'in doc.createElement('input'), placeholder=function(input){ var text=input.g

iOS利用storyboard修改UITextField的placeholder文字颜色

最近有个需求需要修改UITextField的placeholder文字颜色,在网上找发现有用代码修改的,但是考虑到更加优雅的实现,所以尝试着在storyboard中直接实现,结果竟然真的成功了(原谅我太小白),实现的位置如下: 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLabel.textColor). 3.选择Type,有很多种(这里我们选择Color) 4.设置Value(