更改输入框焦点上的按钮样式答案

【问题标题】：change style of button on focus of input box更改输入框焦点上的按钮样式
【发布时间】：2015-01-29 01:59:36
【问题描述】：

问题：我想在输入元素的焦点上更改按钮的样式。

这是模板代码：

<input type="text"></input>
  <span>
    <button class="search">Poor Me!</button>
  </span>

这是css代码：

.search-form input:focus{
  border: 1px solid #009BC6;
  outline: none;
}

.search-form input:focus + .search{
  background-color: #009BC6;
  outline: none;
}

预期输出：关于输入框的焦点
1. 将 1x 宽度的边框应用到输入框
2. 改变按钮的背景颜色

实际输出：
1.边框应用于输入框
2. 按钮背景颜色没有变化

http://jsfiddle.net/6Y8GL/7/

【问题讨论】：

标签： html css

【解决方案1】：

演示 -http://jsfiddle.net/6Y8GL/8/

input:focus ~ span #btnClick {
 background: red;
}

css 找不到#btnclick，因为它不是input 的兄弟，你应该更具体，定位span 然后#btnClick

input:focus {
  border: 2px solid green;
}
input:focus ~ span #btnClick {
  background: red;
}

<input type="text"></input>
<span>
    <button id="btnClick">Click Me!</button>
</span>

【讨论】：

我应该更新我的css3知识。谢谢它的工作。

【解决方案2】：

删除按钮周围的span。符号+ 称为下一个直接兄弟。根据您的标记按钮不是下一个直接兄弟元素。

<input type="text"></input>
<button class="search">Poor Me!</button>

【讨论】：

我应该更具体地了解代码。我正在使用引导程序，因此需要跨度。

【解决方案3】：

试试 CSS：

input + span button {
    background :blue;
}
input:focus + span button {
    background :red;
}

【讨论】：

【解决方案4】：

使用 input:focus ~ span > #btnClick 代替 .search-form input:focus + .search

Updated jsFiddle

工作演示：

input:focus{
    border: 2px solid green;
}

input:focus ~ span > #btnClick{
   background: red;
}

<input type="text"></input>
<span>
    <button id="btnClick">Click Me!</button>
</span>

【讨论】：