更改輸入焦點上的搜索按鈕

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

注：

1. 我添加了Foo類的輸入文本。
2. 我在CSS中添加了「+」。

包含.foo：重點+ input.newsletter提交