更改输入焦点上的搜索按钮答案

【问题标题】：Change search button on input focus更改输入焦点上的搜索按钮
【发布时间】：2015-08-15 11:08:19
【问题描述】：

我想在用户开始在输入框中输入内容时更改搜索按钮。

我的html代码是

 <div class="newsletter">
    <input type="text" name="email" placeholder="Your Email Here" value="">
    <input class="newsletter-submit" type="submit" value="">
 </div>

CSS

.newsletter input[type="text"]{
  background:transparent;
  color: $white;
  border: 1px solid $white;
  font-family: 'sorts-mill-goudy'; font-style: italic;
}
input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil.png") no-repeat;
  width:21px;
  height: 21px;
  position: absolute;
  border: none;
  right:50px;
  top:25px;
}

.newsletter input:focus input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil-hover.png") no-repeat !important;
}

但是在焦点上搜索按钮没有改变。

非常感谢任何帮助。提前致谢。

【问题讨论】：

也许您缺少+ 选择器
在哪里使用 + 选择器以及如何使用。
我们可以有一个 JSFidlle 吗？
使用绝对路径图像 URL 创建代码演示。我们可以提供帮助。

标签： html css

【解决方案1】：

HTML

 <input class="foo" type="text" name="email" placeholder="Your Email Here" value="">
 <input class="newsletter-submit" type="submit" value="">

CSS

.newsletter input[type="text"]{
  background:transparent;
  color: $white;
  border: 1px solid $white;
  font-family: 'sorts-mill-goudy'; font-style: italic;
}
input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil.png") no-repeat;
  width:21px;
  height: 21px;
  position: absolute;
  border: none;
  right:50px;
  top:25px;
}

.foo:focus + input.newsletter-submit{
  background: url("../images/footer-newsletter-pencil-hover.png") no-repeat !important;
}

注意：

我在输入文本中添加了 foo 类。
我在 css 中添加了“+”。

.foo:focus + input.newsletter-submit

【讨论】：

优秀。学到了新东西。非常感谢您的帮助。