css - :focus not working for the input control scss

Question

我正在使用 scss，我正在尝试创建一个没有 javascript 的 float 标签。 在这里，我在一个 div 中有一个文本框和标签，类名 form-type-textfield 和 form-type-email。我在这里要做的是只要焦点在文本框上，我就会向上移动标签。

但似乎 :focus 对我不起作用，但是当我使用 :hover 时它工作正常，但我想在 :focus 上应用 css .

我在这里做错了什么？ 我的 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

div 没有 :focus 状态，但您可以使用 :focus-within pseudoclass 检查其后代是否获得焦点

.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 { ... }