placeholder的样式设置

placeholder的样式设置在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了。::-webkit-input-placeholder

大家好,又见面了,我是你们的朋友全栈君。

在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了。

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE浏览器 */
注1:冒号前写对应的input或textarea元素等。
注2:placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。
 
eg:
css代码
 #input-test{
        color: #FFC0CB;
        font-size: 1.2em;
        width: 180px;
        height: 36px;
}
#input-test::-webkit-input-placeholder{
        color: #ADD8E6;
}
#input-text::-moz-placeholder{  //不知道为何火狐的placeholder的颜色是粉红色,怎么改都不行,希望有大牛路过帮忙指点
        color: #ADD8E6;        
}
#input-text:-ms-input-placeholder{  //由于我的IE刚好是IE9,支持不了placeholder,所以也测试不了(⊙﹏⊙),有IE10以上的娃可以帮我试试
        color: #ADD8E6;        
}
html代码
<div id=”container”>
    <input id=”input-test” type=”text” placeholder=”修改placeholder样式” />
</div>
效果如下图所示:
<span role="heading" aria-level="2">placeholder的样式设置
<span role="heading" aria-level="2">placeholder的样式设置
<span role="heading" aria-level="2">placeholder的样式设置
<span role="heading" aria-level="2">placeholder的样式设置

PS:除此之外,还能修改placeholder的font-weight等样式。

eg:
我加了句 “font-weight: bold;”,效果如下图所示:
<span role="heading" aria-level="2">placeholder的样式设置
 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154366.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ettercap做arp欺骗和dns欺骗—–详细教程

    ettercap做arp欺骗和dns欺骗—–详细教程本教程仅供学习使用,不得用于非法途径,我概不负责!!!!!!一年前玩过ettercap做arp欺骗和dns欺骗的实验,都忘记怎么操作的了,哈哈,现在重新整理下资料,方便小伙伴学习。 工具介绍: Ettercap:刚开始只是作为一个网络嗅探器,但在开发过程中,它获得了越来越多的功能,在中间的攻击人方面,是一个强大而又灵活的工具。它支持很多种协议(即使是加密的)…

  • Android入门学习教程PDF免费下载

    Android入门学习教程PDF免费下载场景Android(安卓)是一种以Linux为基础的开放源码操作系统,主要使用于便携设备。2005年由Google收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。实现关注公众号:霸道的程序猿回复:Android书籍免费下载。…

  • mac 激活navicat15【最新永久激活】

    (mac 激活navicat15)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • [转]Asp.Net MVC 扩展联想控件

    [转]Asp.Net MVC 扩展联想控件

  • vc++菜鸟教程_vc6.0使用教程详解

    vc++菜鸟教程_vc6.0使用教程详解怎样编写自己的VCL控件     用过Delphi的朋友们,大概对Delphi的最喜欢Delphi的不是他的强类型的pascal语法,而是强大的VCL控件,本人就是一位VCL控件的爱好者。    VCL控件的开源,给我们带来了享之不尽的好处。不像以前的ole控件以及ActiveX,你完全可以重写Delphhi标准控件,而且网上这方面的资源很多。    关于如何编写VCL控件,和多Delphi

  • hdoj 2602 Bone Collector 【01背包】

    hdoj 2602 Bone Collector 【01背包】

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号