CSS class 专注时

Question

我有一个名为 .color-blue 和 color:blue !important 的 class。我有一个 class inputContent 和一个 div，像这样：

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

我想集中输入，.icon 变成 class 的颜色，而不把 color:blue !important 放在 inputContent 或其他地方。

我测试过

.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

我只想 "remove" 或 "cancel" style="color:red !important;" 的颜色并用 class color-blue 替换颜色而不添加像 color:blue;

CSS class 专注时

CSS class when focused

css

focus