フォーカスされたCSSクラス

Question

.color-blueというクラスとcolor:blue !importantというクラスがあります。 そして、私はこのように、入力とのdivとクラスinputContentを持っている：

<div class="inputContent"> 
    <input> 
    <div class="icon color-blue" style="color:red !important;">TEST</div> 
</div> 

と私は集中入力にしたい、.iconはinputContentでcolor:blue !importantまたはその他を入れずに、クラスの色になります。

私は

.inputContent input:focus ~ .icon { 
    color:inherit; 
} 

しかテストしています。

Answer 1

あなたはjQueryを使ってそれを行うことができます。

$("input").focus(function(){ 
    $(".icon").attr("style", "color:blue"); 
}); 

Answer 2

は、このいずれかを試してみてください。

<style> 
    .icon{ 
     color: red;} 
     input:focus + .icon{ 
     color: blue; 
     } 
</style> 
<div class="inputContent"> 
<input> 
<div class="icon">TEST</div> 
</div> 

Answer 3

私はちょうど「削除」または「キャンセル」style="color:red !important;"の色とで色を交換したいですクラスcolor-bluecolor:blue;