Question

我希望用户图标和锁定图标在输入聚焦时改变颜色，但我不知道怎么办可以请任何人帮助我（我希望图标颜色为＃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

Answer 1

您可以使用input:focus + .fa css选择器来完成任务。请注意，我已将<span class="fa fa-user"></span>更改为输入元素之后。

详细了解plus css selector

有关css selectors

的更多信息

请参阅updated fiddle here

@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>

Answer 2

您的图标不在输入字段中，这就是您现在描述CSS的方式。

当您在输入字段后面放置图标span时，可以使用+选择器将css添加到以下元素。

请参阅此链接https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

Answer 3

你可以试试这个

 <div class="input-pilotage">
   <input type="text">
   <label> date fin : </label>
   <i class="fi-calendar"></i>
 </div>

//css
.input-pilotage input:focus + label {
    color: #005EB8;
}
.input-pilotage input:focus + label + i {
    color: #005EB8;
}

输入聚焦时CSS更改图标颜色

3 个答案: