: фокус не работает для элемента управления вводом scss
Я использую 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;
}
}
Ответы 2
Если я правильно прочитал ваш вопрос, вы пытаетесь использовать: focus на элементе <div>? Насколько мне известно,: focus работает только с элементами, которые принимают пользовательский ввод / действие, такими как теги <a> и <input>. Это объясняет, почему: hover работает, а: focus - нет.
Спасибо за обновленный пост - похоже, вы используете вложение и таргетинг на ярлык как дочерний элемент ввода? Это будет проблемой, поскольку вход и метка (вероятно) являются братьями и сестрами?
Тогда вам нужно будет изменить структуру вашего SCSS, поскольку вы в настоящее время нацеливаетесь на дочерний элемент. Используйте родственный селектор (+) или имя класса (я полагаю, что имя класса будет работать хорошо, поскольку это похоже на то, что вы можете повторять на всем сайте?).
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 { ... }
Привет, я пропустил input в посте, я обновил.
этот стиль теперь ищет метку как дочерний элемент ввода. Не может работать
Можете ли вы опубликовать код, который идет не так? В вашем текущем примере нет
:focus.