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

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

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

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

Answer 1

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

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

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

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

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