使用Bootstrap将样式应用于输入文本上的按钮

Question

我有一个使用Bootstrap的表单，我想在输入文本为焦点时将样式应用于按钮（例如当焦点背景为绿色时），我该怎么办？

主要结构：

  <div class="col-md-5"><div class="input-group">
        <input id="inputSearch cf" class="form-control" placeholder="Search..." type="text">
        <span class="input-group-btn">
          <button id="btnSearch" class="btn btn-primary" type="button">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </div>
</div>

这是我的JSFFidle：http://jsfiddle.net/3Q3Le/

Answer 1

Demo Fiddle

尝试将以下内容添加到CSS中：

input[id="inputSearch cf"]:focus{
    background:green;
}

Answer 2

试试这个：http://jsfiddle.net/3Q3Le/1/

#inputSearch:focus {
    background-color: green;
    color: #fff;
}

#inputSearch:focus + .input-group-btn #btnSearch {
    background: red;
}

Answer 3

在您的网站css文件中添加此样式：

    .form-control:focus {
    border-color: #00cf00;
    box-shadow: 0 1px 1px rgba(0, 207, 0, 0.075) inset, 0 0 8px rgba(0, 207, 0, 0.6);
    outline: 0 none;
}

.form-control:focus + .input-group-btn .btn { background:green }

Click here for demo

Answer 4

如果你想要，你可以使用jQuery。

$("[id='inputSearch cf']").click(function() {
        $("#btnSearch").css("backgroundColor","green");
 });

当然之前你应该加载jQuery库

您可以在这里找到演示：http://jsfiddle.net/3Q3Le/4/