如何使整个表单（输入和提交按钮）在焦点上更改边框颜色（引导程序 3）

Posted 2023-03-06

【中文标题】如何使整个表单（输入和提交按钮）在焦点上更改边框颜色（引导程序 3）

【英文标题】：how to make the entire form (input and submit button) change border color on focus (bootstrap 3)

【发布时间】：2013-09-08 08:00:14

【问题描述】：

我正在使用 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/

【问题讨论】：

这里是：jsfiddle.net/CbGpP

【参考方案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/

【参考方案2】：

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

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

【参考方案3】：

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

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

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