我想在点击输入字段时更改字体真棒图标的颜色。到目前为止,我只是设法在点击时更改输入边框颜色,但无法弄清楚如何更改图标。不确定为什么input:focus i
无效。我也试过了input:focus .fa
而没有尝试过。任何建议将不胜感激,谢谢!
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
#signInForm .input-icons {
position: relative;
display: inline-block;
}
#signInForm .input-icons input {
width: 300px;
font-size: .9rem;
text-indent: 20px;
padding: .1rem;
border: 0;
border-bottom: solid 2px #999;
background-color: transparent;
}
#signInForm .input-icons i {
color: #999;
position: absolute;
top: .15rem;
left: .3rem;
}
#signInForm .input-icons input:focus {
border-color: #00aef0;
}
#signInForm .input-icons input:focus i {
color: #00aef0;
}

<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<div id="signInForm">
<form>
<div class="input-icons">
<i class="fas fa-user"></i>
<input type="text" placeholder="Name" required>
</div>
<div class="input-icons">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" required>
</div>
</form>
</div>
&#13;
答案 0 :(得分:2)
由于您的元素有position:absolute
并且没有上一个选择器,您可以更改图标以在输入后进行,并且能够使用+
selector:
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
#signInForm .input-icons {
position: relative;
display: inline-block;
}
#signInForm .input-icons input {
width: 300px;
font-size: .9rem;
text-indent: 20px;
padding: .1rem;
border: 0;
border-bottom: solid 2px #999;
background-color: transparent;
}
#signInForm .input-icons i {
color: #999;
position: absolute;
top: .15rem;
left: .3rem;
}
#signInForm .input-icons input:focus {
border-color: #00aef0;
}
#signInForm .input-icons input:focus + i {
color: #00aef0;
}
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<div id="signInForm">
<form>
<div class="input-icons">
<input type="text" placeholder="Name" required>
<i class="fas fa-user"></i>
</div>
<div class="input-icons">
<input type="password" placeholder="Password" required>
<i class="fas fa-lock"></i>
</div>
</form>
</div>