css - 如何使整个表单(输入和提交按钮)在焦点上更改边框颜色(bootstrap 3)

Question

我正在使用 Bootstrap 3 并试图使整个表单(输入字段和按钮)更改焦点上的边框颜色。意思是，如果我在输入字段中单击，按钮的整个边框也应该改变颜色，而不仅仅是输入字段的边框。这有意义吗？

代码如下:

<form class="form-inline" role="form">

<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>

</form>

和CSS:

.form-control:focus {
    border-color:#1ABC9C;
    box-shadow:none;
}

问题是……它只是改变输入字段的颜色，而不是按钮，除非有人点击按钮。如何让它同时改变两者的颜色？

fiddle :http://jsfiddle.net/CbGpP/

Answer 1

使用 adjacent sibling selector所以你的 CSS 看起来像这样:

.form-control:focus, .form-control:focus + span .btn{
    border-color:#1ABC9C;
    box-shadow:none;
}

包括 IE7+ 在内的所有主要浏览器都支持它。

它在这里工作:http://jsfiddle.net/CbGpP/2/