我希望输入的边框底部颜色在单击时随动画变化。与黄线一类似。我希望它出现在所有输入框和选择上。
.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;
}
线索就在您一开始提供的代码中，您需要设置焦点上的同级元素会发生什么：
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;
}
Fiddle: https://jsfiddle.net/6xjyw21m/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
