CSS 伪类 :focus-within 选择器选择一个元素,如果它包含一个已获得焦点(:focus)的元素。
例如,如果你想突出显示或聚焦一个完整的表单,当焦点在任何输入字段上设置,请使用伪类 :focus-within。
语法
:focus-within {
/* ... */
}
CSS :focus-within 示例
以下示例演示了 :focus-within 伪类的使用。当焦点设置在输入字段上时,该输入字段的标签会突出显示。
<html>
<head>
<style>
label {
display: block;
font-size: 20px;
color: black;
width: 500px;
}
input[type="text"] {
padding: 10px 16px;
font-size: 16px;
color: black;
background-color: #fff;
border: 1px solid #597183;
border-radius: 8px;
margin-top: 5px;
width: 500px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
background-color: lightyellow;
}
label:focus-within {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<form>
<label>
Full Name
<input type="text">
</label>
</form>
</body>
</html>
以下示例演示了 :focus-within 伪类的使用。当焦点设置在下拉菜单上时,依次更改标签的背景和边框。
<html>
<head>
<style>
label {
display: grid;
font-size: 18px;
color: black;
width: 400px;
}
select {
padding: 10px 16px;
font-size: 16px;
color: black;
background-color: #fff;
border: 1px solid #597183;
border-radius: 8px;
margin-top: 25px;
width: 300px;
transition: all 0.3s ease;
}
select:focus {
background-color: rgb(173, 233, 209);
}
label:focus-within {
background-color: coral;
border: 2px dashed black;
}
</style>
</head>
<body>
<form>
<label>
喜欢的水果:
<select name="flavor">
<option>香蕉</option>
<option>苹果</option>
<option>草莓</option>
<option>哈密瓜</option>
<option>西瓜</option>
</select>
</label>
</form>
</label>
</form>
</body>
</html>