Html – Changing background color on input focus with css alone


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>


.input-name:focus + .name{

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" />