聚焦内部
如果表单中的任何子元素获得焦点,则更改表单的外观。
- 使用伪类
:focus-within
来为父元素应用样式,如果任何子元素获得焦点。
<form>
<label for="username">用户名:</label>
<input id="username" type="text" />
<br />
<label for="password">密码:</label>
<input id="password" type="text" />
</form>
form {
border: 2px solid #52B882;
padding: 8px;
border-radius: 2px;
}
form:focus-within {
background: #7CF0BD;
}
label {
display: inline-block;
width: 72px;
}
input {
margin: 4px 12px;
}