首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我希望在输入为焦点或有效时将输入边框底边框更改为蓝色

我希望在输入为焦点或有效时将输入边框底边框更改为蓝色
EN

Stack Overflow用户
提问于 2020-10-04 23:15:29
回答 2查看 59关注 0票数 1

下面的html代码如下:

代码语言:javascript
运行
复制
 .inputBox input:focus ~ input,
 .inputBox input:valid ~ input{
    border-bottom: 1px solid #0000cd;
}
代码语言:javascript
运行
复制
<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元素

我希望将输入的边框底部颜色更改为蓝色

我第一次问问题,我描述了每件事,或者忘记了要解释的东西

提前谢谢你

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-04 23:32:00

这将显示您的底部边框蓝色

代码语言:javascript
运行
复制
  .inputBox input:focus,
  .inputBox input:valid {
    border-bottom: 2px solid #0000cd;
    outline: none;
  }

这是在只需要显示蓝色边框的情况下

代码语言:javascript
运行
复制
  .inputBox input:focus,
  .inputBox input:valid {
      border-color: transparent;
      border-bottom: 2px solid #0000cd;
      outline: none;
  }

代码语言:javascript
运行
复制
.inputBox input:focus,
.inputBox input:valid {
    border-color: transparent;
    border-bottom: 2px solid #0000cd;
    outline: none;
}
代码语言:javascript
运行
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2020-10-04 23:20:23

删除同级选择器("~ input")。它选择".inputBox input:focus“后面的输入。

代码语言:javascript
运行
复制
 .inputBox input:focus,
 .inputBox input:valid{
      border-bottom: 1px solid #0000cd;
 }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64196359

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档