Question

<div class="contain">
 <input type="text">
</div>

So… there is basically what I have.

I have a background of the div to be one thing, but I want to change it when the input gains focus… like change the background to image to the same image as before, but with an X at the right for clearing the text field.

How do I do taht with CSS? (just the background switching)

Answer 1

You can’t trigger an element’s CSS change on interaction with another element simply with CSS.

Here’s a simple JQuery solution which accomplishes your goal:

$('input').focus(function(){
    $(this).parent().addClass('focused');
}).blur(function(){
    $(this).parent().removeClass('focused');
});

Working demo 1 (with background colors): http://jsfiddle.net/AlienWebguy/V2hub/

Working demo 2 (with background images): http://jsfiddle.net/AlienWebguy/V2hub/1/