在输入的边框底部添加动画 [英] Add animation to border bottom on input
问题描述
我希望单击时输入的边框底部的颜色随动画而变化。类似于黄线一本。我希望它在所有输入框和选择中。
I want the color of the border-bottom of my input to change with an animation when clicked. Similar to the yellow line one this. I want this to be on all the input boxes and the select.
.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>
我试图在代码中重新创建它，但似乎无法正确完成。任何想法如何做到这一点？
我知道跨度是在代码段上创建黄线的原因，但是我可以重新创建它而不是更改边框颜色而不是添加另一行。
I've tried to recreate this in my code but I cant seem to get it right. Any idea how to do this? I understand that the span is what creates the yellow line on the snippet but can I recreate this instead to change the border-color instead of adding another line.
我的代码。
<!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;
}
推荐答案
在开始时提供的代码中，您需要设置兄弟元素的焦点：
Well the clue was in the code you provided at the beginning, you need to set what happens to the sibling element on focus:
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/
这篇关于在输入的边框底部添加动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
