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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

尝试CSS：

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

Answer 4

而不是.search-form input:focus + .search，请使用input:focus ~ span > #btnClick

Updated jsFiddle

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: