: фокус не работает для элемента управления вводом scss

Question

Я использую scss, я пытаюсь создать плавающую метку без JavaScript.Здесь у меня есть текстовое поле и метка внутри div с именем класса form-type-textfield и form-type-email. То, что я пытаюсь сделать здесь, это то, что всякий раз, когда фокус находится на текстовом поле, я перемещаю метку вверх.

но мне кажется, что :focus не работает для меня, но когда я использую :hover, он работает нормально, но я хочу применить css к: focus.

Что я здесь не так делаю?моя структура HTML выглядит следующим образом.

<div>
    <label>Label</label>
    <input type="textbox">
</div>

css

     .form-type-textfield input:focus,.form-type-email input:focus{
        label{
            transform: translateY(-25px);        
            -moz-transition: all ease-in-out 200ms;
            -webkit-transition: all ease-in-out 200ms;
            transition: all ease-in-out 200ms;
            font-size: 16px !important;
        }
    }

Answer 1

A div не имеет состояния :focus, но вы можете проверить, фокусируется ли какой-либо из его потомков, используя :focus-within псевдокласс

.form-type-textfield:focus-within,   
.form-type-email:focus-within {

    label{
       transform: translateY(-25px);        
       -moz-transition: all ease-in-out 200ms;
       -webkit-transition: all ease-in-out 200ms;
       transition: all ease-in-out 200ms;
       font-size: 16px !important;
    }
}

В качестве альтернативы, если ваш ярлыкследуя input на разметке, вы можете использовать братский комбинатор для нацеливания на эти ярлыки, например

:focus + label { ... }

Answer 2

Если я правильно прочитал ваш вопрос, вы пытаетесь использовать: сосредоточиться на элементе <div>?Насколько я знаю,: focus работает только с элементами, которые выполняют пользовательский ввод / действие, такими как теги <a> и <input>.Это объясняет, почему: зависание работает, но: фокус не работает.