专栏首页黑白安全HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

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

在HTML5中为input标签添加了一个新的属性为placeholder,此placeholder属性可以在input没有任何输入或value的属性为空的情况下,来提示用户在input中该输入什么样的内容,达到一个提示的作用。

以前使用placeholder属性的时候,并未对其进行过CSS定义,一直是浏览器默认的样式,但最近有小伙件一直问我placeholder属性该如何给它定义一个样式,并改变提示文字的颜色。下面详细的和大家说一下。

input标签placeholder属性的用法

代码

<input placeholder='这里是提示的文字' type='text'>

代码运行结果

给input标签的placeholder属性添加CSS样式,改变其文字的颜色

CSS代码

在<head>标签内添加如下代码

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

HTML代码

<input placeholder='这里是提示的文字' type='text'>

代码示图

代码运行结果:

注意说明:

1、此CSS代码并不能在所有的浏览器中生效

2、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Po主是谁?通过新浪微博图片反查上传者信息

    链接为 https://wxt.sinaimg.cn/thumb300/9d0d09ably1fsn7m0jyzzj20m80cidgm.jpg 的图

    周俊辉
  • 黑客劫持全球各地的打印机,推广流行的YouTube频道

    一位匿名黑客在全球范围内劫持了超过50,000台连接互联网的打印机,打印出宣传订阅PewDiePie YouTube频道的消息。Felix Arvid Ulf ...

    周俊辉
  • 为登黑客排行榜,小伙竟然将工商局网站变成赌博网

    一名 27 岁的网站管理员,为了能在黑客界展现自己的技术,从 2017 年起,多次黑入他人计算机系统,其中不乏一些大的企业公司,甚至曾经将河南一工商局的网站变成...

    周俊辉
  • 凡选择必有代价

    王兵
  • 100行代码拆解EventBus核心逻辑(三)

    在前文的讲解中对 EventBus 的实现逻辑有了大概的理解之后,我们知道 Java 解析注解可以在运行时解析也可以在编译期间解析。由于运行时解析是通过反射来获...

    阳仔
  • 一篇文章告诉你React里为什么不能用index作为key

    之前在写react的时候,当我们做map循环的时候,当我们没有一个唯一id来标识每一项item的时候,我们可能会选择使用index

    2014v
  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下!

    IMWeb前端团队
  • 【开源】QuickPager 分页控件的内部结构,和OO原则与设计模式

    关键字:提出需求、需求分析、原则、设计模式、索引      先说一下讨论的范围:使用数据库保存信息的项目,b/s结构,asp.net编写。请不要讨论这个范围之外...

    用户1174620
  • 撩一下一些必要的js工具函数

    不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下! debounce 当监听一些scroll,resize事...

    IMWeb前端团队
  • 拯救“不拍照会死星人”,未来AR或可让“高危自拍”消亡?

    “自拍死”话题最火的时候要属2016年,恰巧也是VR元年的时候。当然,二者当时没啥关联。不过,不代表以后也没有。

    VRPinea

扫码关注云+社区

领取腾讯云代金券