本文介绍了一种不使用JavaScript而仅利用CSS伪类实现输入框聚焦及有效性验证的方法。通过`:focus`和`:valid`伪类，可以轻松改变输入框附近元素的显示状态，例如显示“发送”按钮并隐藏“点赞”按钮。
不用JavaScript就能实现聚焦和不聚焦、输入有效值的状态切换
首先来看看代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.send{
display:none;
}
.input:focus ~ .send{ //表示input框聚焦后且是有send类选择器的标签
display:inline-block;
}
.input:valid ~ .send{ //表示input框输入有效的值且是有send类选择器的标签
display:inline-block;
color:red;
}
.input:focus ~ .like, .input:valid ~ .like{//表示input框聚焦后且是有like类选择器的标签, //input框输入有效的值且是有like类选择器的标签
display:none;
}
</style>
</head>
<body>
<input type="text" class="input" required> <span class="like">点赞</span> <span class="send">发送</span>
</body>
</html>
来看看不聚焦状态：
然后再看看聚焦后的状态；
输入有效值状态：
可以把文字换成图片。。。
扫一扫
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
