Twitter bootstrap 选择输入焦点上的第一个输入组项

当输入框聚焦时，我试图选择第一个输入组插件

到目前为止，我已经尝试了，但只选择了第二个输入组项

这是我的HTML

.container{
边缘顶端：40px；
}
.form控件：focus+.input组插件{
颜色：#f00！重要；
}

关注我
@
@

请帮忙！！！
我想更改第一个输入组插件的颜色，而不是第二个

如果要保持当前的HTML结构，必须在DOM中向上移动以修改指定的附加元素。这将需要Javascript

使用Javascript，我们希望检查元素是否处于焦点或模糊状态。我们可以使用内联

onfocus

和

onblur

或者仅仅通过添加事件监听器来实现这一点

添加侦听器后，需要找到要相对于当前元素进行更改的元素，并根据其是否模糊或处于焦点进行更新

var-input=document.querySelector（'.input-group-input.form-control'）；
//论要素焦点
addEventListener（“焦点”，函数（）{
var container=input.parentNode；
var addon=container.querySelector（'.input-group addon'）；
addon.style.color='red'；
});
//关于元素模糊
addEventListener（“blur”，function（））{
var container=input.parentNode；
var addon=container.querySelector（'.input-group addon'）；
addon.style.color='black'；
});
.container{
边缘顶端：40px；
}

关注我
@
@

请帮忙！！！
我想更改第一个输入组插件的颜色，而不是第二个

不使用HTML的当前结构，也可以使用引导。等我有时间的时候，我会看看我是否能做点什么。很酷，我使用了您提供的JavaScript代码，但修改后添加和删除了给定的类