我希望用户图标和锁定图标在输入聚焦时改变颜色,但我不知道该怎么做,有人可以帮助我吗(我希望图标颜色为 #c0392b )
<div class="input-icons">
<span class="fa fa-user"></span>
<input type="text" placeholder="Username">
</div>
<div class="input-icons">
<span class="fa fa-lock"></span>
<input type="password" placeholder="Password">
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font- awesome.min.css";
input {
padding: 5px;
border-radius: 20px;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
}
input:focus {
outline: none;
border: 1px solid #c0392b;
color: c0392b;
}
input:focus > .fa-user {
color: #c0392b;
}
.input-icons {
position: relative;
margin: 5px 100px 5px 100px;
}
.input-icons > input {
text-indent: 17px;
font-family: "Lato", sans-serif;
}
.input-icons > .fa-user {
position: absolute;
top: 7px;
left: 7px;
font-size: 15px;
color: #777777;
}
.input-icons > .fa-lock {
position: absolute;
top: 7px;
left: 7px;
font-size: 15px;
color: #777777;
}
查看 JSFiddle 进行预览JSFiddle
您可以使用input:focus + .fa
css 选择器确实完成了任务。请注意,我已经更改了<span class="fa fa-user"></span>
位于输入元素之后。
查看更多关于加上CSS选择器
更多关于CSS 选择器
See 在这里更新了小提琴
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css";
input {
padding: 5px;
border-radius: 20px;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
}
input:focus {
outline: none;
border: 1px solid #c0392b;
color: c0392b;
}
input:focus + .fa {
color: #c0392b;
}
.input-icons {
position: relative;
margin: 5px 100px 5px 100px;
}
.input-icons > input {
text-indent: 17px;
font-family: "Lato", sans-serif;
}
.input-icons > .fa-user {
position: absolute;
top: 7px;
left: 7px;
font-size: 15px;
color: #777777;
}
.input-icons > .fa-lock {
position: absolute;
top: 7px;
left: 7px;
font-size: 15px;
color: #777777;
}
<div class="input-icons">
<input type="text" placeholder="Username">
<span class="fa fa-user"></span>
</div>
<div class="input-icons">
<input type="password" placeholder="Password">
<span class="fa fa-lock"></span>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)