时间戳

首页 > 解决方案 > 在元素上应用 :focus 伪类

html - 在元素上应用 :focus 伪类

问题描述

在这里，当输入字段上有焦点事件时，我想编辑标签的一些属性，所以，

但它不起作用，当输入字段获得焦点时，标签元素没有变化我应该做什么以下两种方法都不适合我。

我把它写成，

  .input-field:focus + .input-label{
     background : black;
   }
   or
  .input-field:focus .input-label{
     background : black;
   }

这两种方法都不适合我。

标签： htmlcss

解决方案

使用:focus-within伪选择器来实现所需的功能。如果元素接收焦点或包含另一个接收焦点的元素，则此选择器有效。

.container:focus-within label{
  background-color: red;
}
<div class="container">
  <label>Label</label>
  <input type="text">
</div>

您可以在此处阅读有关此选择器的更多信息。请注意，IE 不支持此方法，但谁在乎...

推荐阅读