可以使用CSS伪类来实现将提示字体显示在输入框中
可以使用以下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伪元素。
原文地址: https://www.cveoy.top/t/topic/bjWM 著作权归作者所有。请勿转载和采集!