Html – Changing background color on input focus with css alone

cssfocushtml

Am trying to change the background color of an input holder once the input is clicked i used these

<div class="name"> <input type="text" class="input-name"></div>

CSS

.input-name:focus + .name{
background:#f00;
}

this is how it is normally
enter image description here

this is what i want on focus
enter image description here

but it wont Work

Best Solution

You cannot select a parent element with CSS.

However. you can fake something similar with a box shadow

body {
    margin: 25px; /* not required */
}

.input-name:focus {
    box-shadow:0 0 0 10px red;
}
<div class="name">
    <input type="text" class="input-name" />
</div>