當輸入焦點集中時，CSS更改圖標顏色

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

您可以使用CSS input:focus + .fa塞萊ctor完成任務。請注意，我已將<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是如何，現在描述。

當您將圖標跨度放在輸入字段後面時，可以使用+選擇器將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; 
}