css - 如何使整个表单（输入和提交按钮）在焦点上更改边框颜色（引导程序 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;
}

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

小提琴：http: //jsfiddle.net/CbGpP/

Answer 1

使用相邻的兄弟选择器，使您的 CSS 看起来像这样：

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

所有主流浏览器都支持它，包括 IE7+。

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

Answer 2

您可以~在 css 中使用将鼠标悬停在一个元素上并选择另一个元素。您还可以删除任一元素的左右边框，使它们看起来像一个。

演示http://jsfiddle.net/kevinPHPkevin/CbGpP/4/

.form-control:focus ~ span .btn{
    border-color:#1ABC9C;
    box-shadow:none;
    border-left: #ccc;

}

Answer 3

如果你不使用JS，你必须有点hacky，所以如果你改变你的布局，这将不灵活，谨慎使用。

.form-control:focus,
.form-control:focus + .input-group-btn > .btn {
    border-color:#1ABC9C;
    box-shadow:none;
    /* outline: 5px solid red; */
}