我想改变占位符和图标的颜色，当输入块为重点，充满了文字。
这里是代码的链接 - https://www.w3schools.com/code/tryit.asp?filename=FZTM5JKXA5D2
我尝试这一点，但不工作
.inputBlock input:focus i {
z-index: 1;
position: absolute;
color: #ffffff;
left: 4px;
top: 17px;
}
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.inputBlock {
margin: 10px 0;
width: 600px;
position: relative;
}
.inputBlock input {
padding: 17px 25px;
font-size: 14px;
border-radius: 2px;
cursor: pointer;
}
.inputBlock i {
z-index: 1;
position: absolute;
color: #0082D4;
left: 4px;
top: 17px;
}
.inputBlock input:focus i {
z-index: 1;
position: absolute;
color: #ffffff;
left: 4px;
top: 17px;
}
.inputBlock input::-moz-placeholder {
color: #0082D4;
}
.inputBlock input::-webkit-input-placeholder {
color: #0082D4;
}
.inputBlock input:focus::-moz-placeholder {
color: #8B9DA7;
border-color: #0082D4;
}
.inputBlock input:focus::-webkit-input-placeholder {
color: #8B9DA7;
border-color: #0082D4;
}
</style>
</head>
<body>
<div class="inputBlock"><div>
<input type="text" placeholder="Add input"> </input></div>
<i class="fa fa-car"> </i>
</div>
</body>
</html>
input:focus + .fa.fa-car {
color: red;
}问题是在你的CSS选择器：
.inputBlock input:focus i {
这将选择inputBlock-DIV中的聚焦输入内的i元素。您<i>是输入的兄弟姐妹，没有后代，你therfore需要使用任一adjacent sibling selector或类似这样的general sibling selector：
.inputBlock input:focus + i {
希望这可以帮助！
你可以在jQuery的容易做到这一点：
$(document).ready(function() {
$("input").focus(function() {
$(".fa-car").css("color", "red");
}).blur(function() {
$(".fa-car").css("color", "#0082D4");
});
});