Изменить кнопку поиска на фокусе ввода

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 подать