Как установить focus на элемент?

Создал группу иконка+input. Проблема в том, что hover и active - работает, а вот focus нет. Подскажите, как решить проблему?
* { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .container { display: flex; align-items: center; justify-content: center; height: 100%; } .label { display: inline-flex; background: whitesmoke; border: 1px solid lightgray; outline: none; } .icon { display: inline-block; padding: 10px; } .input { padding: 10px; outline: none; border: none; } /* active */ .label:hover { border-color: green; } .label:active, .label:focus { border-color: red; }

Ответ

Все просто .label:focus-within
* { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .container { display: flex; align-items: center; justify-content: center; height: 100%; } .label { display: inline-flex; background: whitesmoke; border: 1px solid lightgray; outline: none; } .icon { display: inline-block; padding: 10px; } .input { padding: 10px; outline: none; border: none; } /* active */ .label:hover { border-color: green; } .label:active, .label:focus, .label:focus-within { border-color: red; }