Question

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

但是似乎: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

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

Answer 2

如果我正确阅读了您的问题，则说明您是在<div>元素上使用：focus吗？据我所知，：focus仅适用于需要用户输入/操作的元素，例如<a>和<input>标签。这可以解释为什么：hover有效但：focus无效。

：focus无法用于输入控件scs

2 个答案: