代码之家 › 专栏 › 技术社区 › Oscar R

如何将<input>元素的::占位符的颜色更改回其默认颜色

placeholder css

Oscar R · 技术社区 · 2 年前

正如您在第二个输入字段中看到的那样,它没有应用CSS,默认的占位符颜色(至少对我来说是chrome)是灰色。然而,当我在第一个输入字段上将颜色改回“初始”(应该是它的默认颜色)时,它变成了黑色。我也试过使用“unset”,但也没用。如何使颜色返回到默认颜色???

.inp1::placeholder {
  color: red;
}
.inp1:hover::placeholder,
.inp1:focus::placeholder {
  color: initial;
}

<input class="inp1" type="text" placeholder="Search">

<input class="inp2" type="text" placeholder="Search">

1 回复 | 直到 2 年前

dippas 2 年前

这似乎是Chrome的问题,Firefox在使用关键字时表现正常 initial ,可以使用关键字 revert

.inp1::placeholder {
  color: red;
}
.inp1:hover::placeholder,
.inp1:focus::placeholder {
  color: revert;
}

<input class="inp1" type="text" placeholder="Search">

<input class="inp2" type="text" placeholder="Search">

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

3 月前

magenta placenta · 将css变量合并为一个变量

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前