当输入框聚焦时改变按钮的样式。

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/

- Ajinkya Pisal

Answer 1

demo -http://jsfiddle.net/6Y8GL/8/

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

css cant find the #btnclick because it is not the sibling of the input you should be more specific, target the span and then #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>

- Vitorino fernandes

---

我应该更新一下我的CSS3知识。谢谢，它起作用了。 - Ajinkya Pisal

Answer 2

移除按钮周围的 span 标签。符号 + 被称为下一个立即兄弟元素。根据您的标记，按钮不是下一个立即兄弟元素。

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

- Suresh Ponnukalai

---

我应该更明确地说明代码。我正在使用 bootstrap，所以需要使用 span。 - Ajinkya Pisal

Answer 3

尝试使用CSS：

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

- anthumchris

Answer 4

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

已更新的 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>

- Rahul Desai