CSS SNIPPET

  返回

表单样式的焦点随动  视觉效果交互体验

当表单中的输入元素获得焦点时,改变表单的样式。

HTML
<div class="focus-within">
  <form>
    <label for="given_name">Given Name:</label> <input id="given_name" type="text" /> <br />
    <label for="family_name">Family Name:</label> <input id="family_name" type="text" />
  </form>
</div>
CSS
form {
  border: 3px solid #2d98da;
  color: #000000;
  padding: 4px;
}

form:focus-within {
  background: #f7b731;
  color: #000000;
}
效果演示

代码说明
  • 如果任何子元素获得焦点,使用:focus-within 伪类为父元素应用样式。例如 form元素内的input 元素。
浏览器支持

85.4%

⚠️ IE11或当前版本的Edge都不支持。