修改输入框placeholder文字默认颜色

最新推荐文章于 2024-09-19 11:14:50 发布

jason_lyp

最新推荐文章于 2024-09-19 11:14:50 发布

阅读量594

点赞数

CC 4.0 BY-SA版权

分类专栏： HtmlCss

本文链接：https://blog.youkuaiyun.com/jason_lyp/article/details/78004665

HtmlCss 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何修改HTML输入框中placeholder的默认颜色和字体，实现个性化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input name="id_card" placeholder="请输入邮箱/手机号" type="text">

针对placeholder来设置你自己想要的颜色

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;opacity:1;
}

input:-ms-input-placeholder{
    color: #000;opacity:1;
}

input::-webkit-input-placeholder{
    color: #000;opacity:1;
}

也可以给这个属性加字体

input::-webkit-input-placeholder { /* WebKit browsers*/ 
　　color:#999;font-size:14px;
　　}
input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/ 
　　color:#999;font-size:14px;
　　}
input::-moz-placeholder {  /* Mozilla Firefox 19+*/ 
　　color:#999;font-size:14px;
　　}
input:-ms-input-placeholder { /* Internet Explorer 10+*/ 
　　color:#999;font-size:14px;
}