change the color of the div after click inside the input. (css only no js )

Question

I have an email input inside a div and I want to change the color of the div after click inside the input. (css only no js )

i dont want use JS for this so I want to know is it possible with css only ?

Answer 1

You can do this but it is kind of a workaround:

HTML:

<form>
  <div class="outside">
     <label>email: </label>
     <input class="input" type="text" />
     <div class="inside"></div>
  </div>

  <div class="outside">
    <label>password: </label>
    <input class="input" type="password" />
    <div class="inside"></div>
  </div>
</form>

CSS:

.outside {
    position: relative;
    padding: 30px;
    background: red;
}

.outside * {
    position: relative;
    z-index: 2;
}

.outside > .input:focus ~ .inside {
    background: blue;
}

.outside > .inside {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;

    width: 100%;
    height: 100%;
}