伪元素改变placeholder占位符属性的默认样式实例页面

最新推荐文章于 2025-06-29 09:09:06 发布

转载最新推荐文章于 2025-06-29 09:09:06 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Lily-L/p/6250256.html

本文介绍如何使用CSS伪元素为不同浏览器中的输入框占位符文本设置样式，包括字体、颜色及文本缩进等属性。通过特定于浏览器的伪元素确保跨浏览器兼容性。

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

http://www.zhangxinxu.com/study/201306/pseudo-elements-to-style-placeholder-attribute.html

CSS代码：

[placeholder] { font-family: 'Microsoft yahei'; }
::-moz-placeholder {
    color: mediumvioletred;
    text-indent: 5px; /* 没有用 */
    opacity: 1!important;
}
:-ms-input-placeholder {
    color: mediumvioletred;
    text-indent: 5px;
}
::-webkit-input-placeholder {
    color: mediumvioletred;
    text-indent: 5px;
}