请选择 进入手机版 | 继续访问电脑版

html5表单placeholder属性

发表于 11-22 18:49 显示全部楼层 7 69

本帖最后由 欧水萍 于 2017-11-23 09:07 编辑

        在HTML5中新增了许多新特性,其中placeholder就是其中之一。placeholder属性可以定义表单元素的提示输入文字,在密码输入框中使用非常方便,而且提示文字可以在输入内容的时候消失,减少了js的书写。

        IE10、Firefox、Opera、Chrome 和 Safari 支持 placeholder 属性。在支持placeholder属性的浏览器中,placeholder默认显示为灰色。例如下面的示例:

image.png


        直接选中表单元素是不能对其提示文字的颜色进行修改的,但是实际工作中经常会遇到需要修改表单提示内容颜色的需求,那么placeholder设置的提示文字颜色可以通过什么代码来修改呢?placeholder文字颜色修改根据不同的浏览器,要使用不同的选择器代码:


::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */

::-moz-placeholder{}                  /* Firefox版本19+ */

:-moz-placeholder{}                  /* Firefox版本4-18 */

:-ms-input-placeholder{}           /* IE浏览器 */


        通过这些伪类,我们就可以修改placeholder占位文字的样式,伪类前面直接写表单元素选择器,在通过修改color属性即可,举例:


样式:

input{width: 200px; height:26px;}

.txt::-webkit-input-placeholder{color:#000;}    /* 使用webkit内核的浏览器 */

.txt::-moz-placeholder{color:#000;}                  /* Firefox版本19+ */

.txt:-moz-placeholder{color:#000;}                   /* Firefox版本4-18 */

.txt:-ms-input-placeholder{color:#000;}            /* IE浏览器 */


input[type=password]::-webkit-input-placeholder{color:red;}    /* 使用webkit内核的浏览器 */

input[type=password]::-moz-placeholder{color:red;}                  /* Firefox版本19+ */

input[type=password]:-moz-placeholder{color:red;}                   /* Firefox版本4-18 */

input[type=password]:-ms-input-placeholder{color:red;} 


结构:

<input type="text" placeholder="请输入账号" class="txt">

<br>

<br>

<input type="password" placeholder="请输入密码">


效果:


image.png









回复 使用道具
举报
PPAP

发表于 12-05 23:28 显示全部楼层

路过,支持一下

回复 支持 反对 使用道具
举报

活跃活跃论坛气氛~求楼主加好友

回复 支持 反对 使用道具
举报
一鸣

发表于 11-28 05:15 显示全部楼层

回复 支持 反对 使用道具
举报
pcatzj

发表于 11-25 00:05 显示全部楼层

回复 支持 反对 使用道具
举报
狸小猫

发表于 11-24 23:32 显示全部楼层

回复 支持 反对 使用道具
举报
NeoCheung

发表于 11-24 00:23 显示全部楼层

回复 支持 反对 使用道具
举报
破葫芦

发表于 11-22 18:53 显示全部楼层

回复 支持 反对 使用道具
举报

发表新文章
欧水萍

小码哥名师团队

0

学分

1651

学币

1813

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1813
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育