placeholder 属性提供一种提示(hint),描述输入域所期待的值。设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。
默认提示文字是灰色的,可以通过CSS来改变文字样式:(不过不同的浏览器设置不同哦~)
//ff下系统表单样式会被覆盖,因此会改变提示文字的颜色。Chrome和Opera则不会 input { color: red; } <label for="name">姓名:</label> <input id="name" type="name" placeholder="在此输入您的姓名" />
1.根据选择器优先级(http://wangjingyi.iteye.com/blog/1447077)可以知道:
标签+伪类选择器的优先级要高于单纯的标签选择器。但是ff这里出现了一点小特殊,所以设置的时候直接添加
input { color: red; }
如果不想更改默认的灰色颜色只需要使用css再次覆盖下就哦了。
input { color: red; } input:-moz-placeholder { color: gray; }
2.Chrome和Opera想要修改默认提示文字的颜色
尝试添加input { color: red!important; }仍未改变默认颜色。
Chrome需要按照如下设置:
::-webkit-input-placeholder { color:blue; } input:-moz-placeholder { color:blue; }
目前到Opera11不支持自定义提示文字的颜色。
扩展:http://seavers.iteye.com/blog/1078292
HTML5 placeholder实际应用经验分享及拓展:
相关推荐
单元一 HTML5基础知识端基础前WebHTML5表单1表单元素2表单标记访问控制3HTML5新的input类型文本域textField 密码域Password field 单选按钮radioButton 复选框 checkBox下拉列表selcet多行文本框textArea按钮button1...
HTML5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。 语法格式 <input type="控件类型" form="值" /> 示例 list属性 <input type="text" list...
在这篇文章中,我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果,使用纯CSS实现。 浮动的文字标签 当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的: label...
这是一个关于兼容input下placeholder的属性的方法,通过js来用另外一中方法来实现
在低版本的浏览器上使用表单的html5属性,跟随html5,兼容IE6+ 在提交表单时,利用html5的表单验证策略,如果浏览器支持html5则使用原生的表单验证,如果不支持,则模拟出一样的验证效果。 最简单的使用: $('form')...
本文以实例代码演示说明了HTML5新增的表单元素和属性,演示代码中包含了placeholder属性、autofocus 属性、list 和 datalist 元素、search 类型文本框、email 类型文本框、number 类型文本框、range 类型文本框、tel...
新的input类型和属性email类型日期时间类型range类型search类型number类型url类型新的input公用属性1.autofocus属性2.pattern属性3.placeholder属性4.required属性 email类型 在HTML5中将一个input元素的类型...
有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el v-model=dataForm....
安装meteor add fongandrew:input-block 用法可以使用以下变量来调用inputBlock模板: schemaContext-SimpleSchema上下文propName-此输入对应的架构中的属性altError-错误状态的文本(将代替任何验证错误显示) 任何...
元素在HTML5中新增加的属性有:autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。...
html5表单新增的类型: email url range number date(date, month, week, time, datetime, datetime-local) search color tel 去掉chrome记住密码后自动填充表单的黄色背景: autocomplete="off" 可以加在input或者...
这个项目的主要功能就是让所有浏览器均支持HTML5表单约束验证功能,同时提供placeholder属性和oninput事件等相关功能。 使用方法 [removed][removed] 加入js后,为Firefox和Chrome等现代浏览器而写的表单验证,IE下...
之前我们介绍过3款漂亮的CSS3表单,包括一个CSS3发光表单、CSS3密码验证表单、CSS3自定义Checkbox和Radio表单。今天要向大家分享一款基于CSS3和jQuery的带小图标精美输入表单,该CSS3表单一共有3款样式,需要高版本...
form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。 select ...
表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定。...input type=text v-model=message placeholder=请输入...> 输入的内容是:{{message}} </div>
HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性。 新增的属性 1、表单相关的属性 对input(type=text)、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在画面打开时自动...
1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div 这是一个div"> 四大标准属性: 1、id :定义元素在页面中独一无二的...
下面说说自己在表单验证过程遇到的两个需求问题及解决的方法。 1.使用x-input组件可知,官方只给了三种类型的is-type验证器,分别是:email,china-name,china-mobile,其他需要自己自定义验证器,怎么写验证器? ...
本文实例讲述了微信小程序表单...'placeholderClass':'inputClass'}}" placeholder="请填写您的姓名" type="text" confirm-type="next" focus="{{whoFocus=='name'?true:false}}" bindblur="nameBlurFocus" /> <
6.3. <input>:placeholder属性:输入框占位符——输入提示 23 6.4. <input> number类型:数字输入框 23 6.5. <input> url类型:网址输入框 24 6.6. <input> email类型:邮箱输入框 24 6.7. 标签:创建文本域 25 6.8....