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

#html #css

Создал группу иконка+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;
}





  

    
    
  
    
  




    

Ответы

Ответ 1

Все просто .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;
}





  

    
      
    
    
  



Ответ 2

Остановился на единственном кросс-браузерном варианте - использование js/jQuery,
при активации/потере фокуса - вешаем/убираем класс focus элементу:



$('.label').focusin(function() {
  $(this).addClass('focus');
}).focusout(function() {
  $(this).removeClass('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.focus {
  border-color: red;
}