Question

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

我的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;
}

但是在焦点上，搜索按钮不会改变。

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

Answer 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：关注 + input.newsletter-submit

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

1 个答案: