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成为类的颜色而不将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

我只是想“删除”或“取消”style="color:red !important;"的颜色，并使用类color-blue替换颜色，而不添加color:blue;

等行

焦点时的CSS类

3 个答案: