我希望在输入为焦点或有效时将输入边框底边框更改为蓝色
我希望在输入为焦点或有效时将输入边框底边框更改为蓝色
提问于 2020-10-04 23:15:29
下面的html代码如下：
.inputBox input:focus ~ input,
.inputBox input:valid ~ input{
border-bottom: 1px solid #0000cd;
}<div class="inputBox">
<input type="text" name="name" id="name" autocomplete="off" required autofocus>
<label class="noselect" for="name"> <i class="fas fa-user"></i> Name :</label>
</div>
这同样适用于我的label元素
我希望将输入的边框底部颜色更改为蓝色
我第一次问问题，我描述了每件事，或者忘记了要解释的东西
提前谢谢你
Stack Overflow用户
回答已采纳
发布于 2020-10-04 23:32:00
这将显示您的底部边框蓝色
.inputBox input:focus,
.inputBox input:valid {
border-bottom: 2px solid #0000cd;
outline: none;
}这是在只需要显示蓝色边框的情况下
.inputBox input:focus,
.inputBox input:valid {
border-color: transparent;
border-bottom: 2px solid #0000cd;
outline: none;
}
.inputBox input:focus,
.inputBox input:valid {
border-color: transparent;
border-bottom: 2px solid #0000cd;
outline: none;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<div class="inputBox">
<input type="text" name="name" id="name" autocomplete="off" required autofocus>
<label class="noselect" for="name"> <i class="fas fa-user"></i> Name :</label>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64196359
复制相关文章
相似问题
腾讯云开发者
