小编DeC*_*roY的帖子

当输入获得焦点时 CSS 改变图标颜色

我希望用户图标和锁定图标在输入聚焦时改变颜色,但我不知道该怎么做,有人可以帮助我吗(我希望图标颜色为 #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>
Run Code Online (Sandbox Code Playgroud)

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: …
Run Code Online (Sandbox Code Playgroud)

css icons focus input

2
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

focus ×1

icons ×1

input ×1