placeholder---获取焦点时清空、修改默认样式

最新推荐文章于 2025-10-07 10:23:57 发布

原创最新推荐文章于 2025-10-07 10:23:57 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#placeholder #placeholder样式 #placeholder清空

本文介绍了如何使用HTML和CSS实现input输入框聚焦时清除占位符文本，并更改其默认样式，包括设置不同浏览器下placeholder颜色。

部署运行你感兴趣的模型镜像

1.input输入框获取焦点时，判断输入框是否有值，未输入则清空placeholder内容。

<input type="text"  placeholder="请输入关键词" onfocus="this.placeholder=''" onblur="this.placeholder='请输入关键词'">

2.修改placeholder默认样式

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    red;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    red;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    red;
}

您可能感兴趣的与本文相关的镜像