聚焦时的CSS类

我有一个名为.color-blue的类，其中color:blue !important。我有一个类inputContent与输入和一个div，像这样：聚焦时的CSS类

<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; 
}

，但没有。

来源

2017-02-12 Moor Wead

在你的情况，重要的内联风格将总是否决外部CSS重要！ – sol

您可以用jQuery做到这一点：

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

来源

2017-02-12 12:20:54 Eliran

是的，但我不想与JS，thx –

我认为我找到了一些东西。从图标div中删除内联样式并使用+号创建此条件。颜色：红色;} 输入：焦点+ .icon {0}颜色：蓝色; } – Eliran

是这样的？ http://codepen.io/anon/pen/vgvyym –

试试这个：

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

来源

2017-02-12 12:57:44 Eliran

看到我的答案请 –

我只是想“删除”或“取消”的style="color:red !important;"的颜色和替换颜色类color-blue没有添加行像color:blue;

来源

2017-02-12 13:34:13

聚焦时的CSS类

回答

相关问题