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

Question

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

下面是模板代码：

<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的焦点上。将1倍宽度的边框应用于输入框
2。更改按钮的背景颜色

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

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

Answer 1

试试CSS：

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

Answer 2

移除按钮周围的span。符号称为下一个直接同级。根据您的标记，按钮不是下一个直接同级元素。

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

Answer 3

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

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

css找不到#btnhtml，因为它不是输入的兄弟姐妹，你应该更具体，目标是span，然后#btnASE

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

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