Html 在输入时将动画添加到底部边框_Html_Css

Html 在输入时将动画添加到底部边框

html css

Html 在输入时将动画添加到底部边框,html,css,Html,Css,我希望在单击时，输入的边框底部的颜色随动画的变化而变化。类似于这条黄线。我希望这是在所有的输入框和选择 .input\u容器{ 显示：内联块；文本对齐：居中； } .AWU输入{ 填充物：5px10px；边界：无；背景：透明；显示：块； } .awsome_输入_边框{ 显示：内联块；宽度：0px；高度：2倍；背景#FEC938；位置：相对位置；顶部：-5px； -webkit过渡：全部轻松输入输出。15秒； -o型过渡：全部缓进缓出。15秒；过渡：全部缓进缓出。15秒；

我希望在单击时，输入的边框底部的颜色随动画的变化而变化。类似于这条黄线。我希望这是在所有的输入框和选择

.input\u容器{
显示：内联块；
文本对齐：居中；
}
.AWU输入{
填充物：5px10px；
边界：无；
背景：透明；
显示：块；
}
.awsome_输入_边框{
显示：内联块；
宽度：0px；
高度：2倍；
背景#FEC938；
位置：相对位置；
顶部：-5px；
-webkit过渡：全部轻松输入输出。15秒；
-o型过渡：全部缓进缓出。15秒；
过渡：全部缓进缓出。15秒；
}
.AWU输入：悬停，
.AWU输入：激活，
.AWU输入：焦点{
大纲：无；
}
.awsome\u输入：悬停+.awsome\u输入\u边框，
.awsome\u输入：活动+.awsome\u输入\u边框，
.awsome\u输入：焦点+.awsome\u输入\u边框{
宽度：100%；
}

请检查以下示例

正文{
背景：#ccc；
}
.定制表格{
字体系列：“Roboto”，无衬线；
字体大小：400；
字体大小：16px；
最大宽度：360px；
利润率：40px自动40px；
背景：#fff；
填充：40px；
边界半径：4px；
}
.custom form.btn primary{
背景色：#8e44ad；
边框颜色：#8e44ad；
}
.自定义表单.表单组{
位置：相对位置；
填充顶部：16px；
边缘底部：16px；
}
.自定义表单.表单组.动画标签{
位置：绝对位置；
顶部：20px；
左：0；
底部：0；
z指数：2；
宽度：100%；
字体大小：300；
不透明度：0.5；
光标：文本；
过渡：0.2s缓解所有；
保证金：0；
-webkit用户选择：无；
-moz用户选择：无；
用户选择：无；
}
.自定义表单.表单组.动画标签：后{
内容：''；
位置：绝对位置；
底部：0；
左：45%；
高度：2倍；
宽度：10px；
可见性：隐藏；
背景色：#8e44ad；
过渡：0.2s缓解所有；
}
.自定义表单.表单组.非空.动画标签{
排名：0；
字体大小：12px；
}
.自定义表单.表单组.表单控件{
位置：相对位置；
z指数：1；
边界半径：0；
边框宽度：0 0 1px；
边框底色：rgba（0,0,0,0.25）；
高度：自动；
填充：3px0.5px；
}
.自定义表单.表单组.表单控件：焦点{
盒影：无；
边框底色：rgba（0,0,0,0.12）；
}
.custom form.form group.form控件：focus~。动画标签{
排名：0；
不透明度：1；
颜色：#8e44ad；
字体大小：12px；
}
.custom form.form group.form控件：focus~。动画标签：after{
能见度：可见；
宽度：100%；
左：0；
}


动画形式
用户名
密码
发送

试试这个简单的例子。我没有使用任何

span

，只使用边框css

输入{
边界：无；
垫底：5px；
过渡：0.2s缓解所有；
}
输入：焦点{
大纲：无；
边框底部：2倍纯黄色；
}
输入：悬停{
边框底部：2倍纯黄色；
}
选择{
边界：无；
背景色：白色；
}
选择：悬停{
边框底部：2倍纯黄色；
}
选择：焦点{
大纲：无；
}

输入
挑选
瑞典
大不列颠联合王国
美国
加拿大

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

HTML

小提琴：

为什么

请检查？更好地解释您所做的工作，特别是在代码太多的情况下…考虑到.custom form.form group.animated label:after{}背景色：#8e44ad；过渡：0.2s缓解所有；这不是给我的：）我一般来说。。。你需要在回答中解释你做了什么
<!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>

.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;
}