<div>
  <input type="text" value="input에 포커스가 들어가면, 부모 요소의 border-color가 바뀝니다." />
</div>
div {
  padding: 5px 10px;
  border: 1px solid #000;
  border-radius: 4px;
  transition: all 0.2s;
}

div:focus-within {
  border-color: red;
}

div:focus {
  border-color: blue;
}

input {
  width: 100%;
  outline: none;
  appearance: none;
  border: 1px solid rgba(0,0,0,0.1);
}

input:focus {
  border-color: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.