新手上路，请多包涵

我希望我输入的边框底部的颜色在单击时随动画一起改变。类似于黄线一号。我希望它出现在所有输入框和选择上。

 .input_container{
  display: inline-block;
  text-align: center;
}
.awsome_input{
  padding: 5px 10px;
  border: none;
  background: transparent;
  display: block;
}
.awsome_input_border{
  display:inline-block;
  width:0px;
  height: 2px;
  background: #FEC938;
  position: relative;
  top:-5px;
  -webkit-transition: all ease-in-out .15s;
  -o-transition: all ease-in-out .15s;
  transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active,
.awsome_input:focus{
  outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border,
.awsome_input:focus+.awsome_input_border{
  width:100%;

}

 <div class="input_container">
<input type="text" class="awsome_input"
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>

我试图在我的代码中重新创建它，但我似乎做对了。知道怎么做吗？我知道跨度是在代码段上创建黄线的原因，但我可以重新创建它来更改边框颜色而不是添加另一条线。

我的代码。

 <!DOCTYPE html>
<html>

  <head>
    <title>form</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="signup-form">
      <form>
        <input type="text" name="firstname" class="line-animation">
        <span class="awsome_input_border" />
        <input type="text" name="lastname" class="line-animation">
        <span class="awsome_input_border" />
        <select name="country">
          <option value="sweden">Sweden</option>
          <option value="uk">United Kingdom</option>
          <option value="us">United States</option>
          <option value="canada">Canada</option>
        </select>
        <span class="awsome_input_border" />
      </form>
    </div>
  </body>

</html>

.signup-form {
  background-color: #efefef;
  width: 50%;
}

.signup-form form {
  padding: 20px 10px
}

.signup-form input[type=text], select {
  border: none;
  border-bottom: 2px solid darkgrey;
  background-color: inherit;
  margin-right: 20px;
}

.signup-form input[type=text]:focus, select:focus {
  outline: none;
  border-bottom: 2px solid #02add7;
}

原文由 Naomi 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 670

2 个回答

得票最新

社区维基

发布于
2022-12-20

✓ 已被采纳

好吧，线索就在你一开始提供的代码中，你需要设置焦点上的兄弟元素会发生什么：

HTML

 <!DOCTYPE html>
<html>

<head>
  <title>form</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="signup-form">
    <form>
      <div class="form-group">
      <input type="text" name="firstname" class="line-animation" placeholder="firstname">
      <div class="line"></div>
      </div>
      <div class="form-group">
      <input type="text" name="lastname" class="line-animation" placeholder="lastname"><div class="line"></div>
      </div>
      <div class="form-group">
      <select name="country">
        <option value="sweden">Sweden</option>
        <option value="uk">United Kingdom</option>
        <option value="us">United States</option>
        <option value="canada">Canada</option>
        </select><div class="line"></div>
      </div>
    </form>
  </div>
</body>

</html>

CSS

 .signup-form {
  background-color: #efefef;
  width: 50%;
}

.signup-form form {
  padding: 20px 10px
}

.signup-form input[type=text], select {
  border: none;
  border-bottom: 2px solid darkgrey;
  background-color: inherit;
  display: block;
  width: 100%;
  margin: none;
}

.signup-form input[type=text]:focus, select:focus {
  outline: none;
}

.form-group {
  text-align: center;
}

.form-group .line {
  height: 2px;
  width: 0px;
  position: absolute;
  background-color: darkgrey;
  display: inline-block;
  transition: .3s width ease-in-out;
  position: relative;
  top: -14px;
}

.signup-form input[type=text]:focus+.line, select:focus+.line {
  width: 100%;
  background-color: #02add7;
}

小提琴： https ://jsfiddle.net/6xjyw21m/

原文由 John Bell 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-20

试试这个简单的例子。我没有使用任何 span 并且只使用 边框 css

 input {
  border: none;
  padding-bottom: 5px;
  transition: 0.2s ease all;
}

input:focus{
    outline: none;
    border-bottom: 2px solid yellow;
}

input:hover {
  border-bottom: 2px solid yellow;
}

select {
  border: none;
  background-color: white;
}
select:hover {
  border-bottom: 2px solid yellow;
}

select:focus{
  outline: none;
}

 <h3>INPUT</h3>
<input type="text" placeholder="What do you think?" />

<h3>SELECT</h3>
<select name="country">
        <option value="sweden">Sweden</option>
        <option value="uk">United Kingdom</option>
        <option value="us">United States</option>
        <option value="canada">Canada</option>
</select>

原文由 DragonBorn 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

在输入的边框底部添加动画

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译