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)
blank

相关推荐

  • Idea激活码永久有效Idea2020.3.2激活码教程-持续更新,一步到位

    Idea激活码永久有效Idea2020.3.2激活码教程-持续更新,一步到位Idea激活码永久有效2020.3.2激活码教程-Windows版永久激活-持续更新,Idea激活码2020.3.2成功激活

  • sqlmap宽字节注入_sql注入orderby子句的功能

    sqlmap宽字节注入_sql注入orderby子句的功能AboutSQLInjection宽字节注入0x01前言对于SQL注入,我估计搞安全的都玩的滚瓜烂熟了,搞站什么的都是分分钟来的,但是之前做了一道宽字节注入的题目,又打开了我一扇通往新世界的大门(PS:早都碰到过,只不过一直没有时间写)。0x02宽字节和mysql单字节字符集:所有的字符都使用一个字节来表示,比如ASCII编码。多字节字符集:在多字节字符集中,一部分字节用多个字节来…

    2022年10月14日
  • Ubuntu 优化、美化(主题、终端)[通俗易懂]

    Ubuntu 优化、美化(主题、终端)[通俗易懂]Ubuntu优化、美化(主题、终端)零效果图一优化Ubuntu\1系统更新\2安装GDebi(第三方软件安装)\3安装搜狗输入法\4软件卸载,安装4.1卸载libreOffice安装WPS4.2卸载掉亚马逊链接4.3卸载firebox浏览器安装Chrome/Chromium浏览器\5修改更新源\6vim配置\6菜单栏位置\7二美化Ubuntu\1主题1.1安装unity-tweak-tool:1.2Flatabulous主题\

  • servlet的工作原理_除氧器的工作原理

    servlet的工作原理_除氧器的工作原理目录 —写在前面—Servlet的使用与侧重点—Servlet的工作原理 a—Servlet容器怎样工作(以Tomcat为例) b—Web应用在servlet容器中如何启动 c—Servlet容器怎样解析web.xml中定义的servlet d—Servlet容器怎样管理servlet生命周期 e—用户的请求是怎样分配到指定servlet进行处理的写在前面: 现在

  • AssemblyInfo.cs文件参数具体讲解「建议收藏」

    AssemblyInfo.cs文件参数具体讲解「建议收藏」AssemblyInfo.cs文件参数具体讲解原文地址:https://www.cnblogs.com/scy251147/archive/2010/10/23/1859576.html

  • 2022.01 pycharm 激活码【中文破解版】

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

发表回复

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

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