Apply Focus to tag parent

Question

How to apply if input:focus then parent (div) change color of border?

    div {
      width: 150px;
      height: 26px;
      border: 1px solid #ccc;
      background: white;
    }
    
    input {
      outline: none;
      border: none;
    }

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

and div must have border: 1px solid blue; if <input> focused.

jsFiddle

Answer 1

Unfortunately there is currently no 'parent' tag selector in CSS - see this answer here : Is there a CSS parent selector?

The only way to explicitly alter the CSS of the parent div when your input is in focus would be to use JavaScript.

If you're able to use JavaScript in your solution, I can provide an example.