可以使用以下CSS代码来实现将提示字体显示在输入框中:

input:focus::placeholder {
  opacity: 0;
}
input:not(:focus)::placeholder {
  opacity: 1;
  color: #999;
}

这段代码使用了两个CSS伪类::focus:not(:focus)

当输入框获取焦点时,:focus伪类生效,将提示字体的不透明度设置为0,这样提示字体就消失了。

当输入框失去焦点时,:not(:focus)伪类生效,将提示字体的不透明度设置为1,颜色设置为灰色,这样提示字体就会显示在输入框中。

注意:该方法需要使用::placeholder伪类,而不是::before::after伪元素。

可以使用CSS伪类来实现将提示字体显示在输入框中

原文地址: https://www.cveoy.top/t/topic/bjWM 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录