focus-within

:focus-within 是一个 CSS 伪类选择器，用于选中包含当前焦点元素的父级元素。它在用户与页面上的元素交互时非常有用。

当用户在页面上的某个元素上设置焦点时，比如输入框或按钮，:focus-within 选择器将选中该元素的所有祖先元素。这使得我们可以根据焦点状态来改变父级元素的样式。

例如，如果我们想在用户在输入框中输入时改变其父级 div 元素的背景颜色，我们可以使用 :focus-within 选择器：

div:focus-within {
  background-color: yellow;
}

这样当用户点击或聚焦输入框时，其父级 div 元素的背景颜色将变为黄色。这为我们提供了一种更直观的方式来呈现元素的焦点状态。

请注意，:focus-within 伪类选择器在 IE11 中不被支持，但在现代浏览器中得到广泛支持。

相关问题

css伪类focus-within

:focus-within是一个CSS伪类，用于选择器匹配其内部有焦点的元素的父元素。当父元素的子元素获得焦点时，可以使用:focus-within来样式化父元素本身。\[2\]在引用\[1\]中的示例中，当.field类的div的后代元素input被focus时，div的背景颜色会变为#f0f0f0，而伪类::after中的*将不会显示。\[1\]而在引用\[2\]中的示例中，当.my-element类的div的子元素获得焦点时，div本身会出现一个3px的红色边框。\[2\]\[3\]所以:focus-within可以用来样式化父元素，当其内部的子元素获得焦点时。
#### 引用[.reference_title]
- *1* [CSS之:focus-within自身或某个后代focus的伪类](https://blog.csdn.net/joyce_lcy/article/details/104481277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [CSS里：focus-within 的作用和用法](https://blog.csdn.net/i042416/article/details/109618129)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

input:focus

当用户在输入框中获得焦点时，可以使用:focus伪类选择器来更改样式。然而，当使用border属性去更改样式时，可能会发现失效了。这是因为在触发:focus时，用作突出的边框色是由outline属性控制的。所以，可以使用outline属性来改变输入框获得焦点时的边框颜色。例如，可以使用以下代码来将输入框的边框颜色改为浅绿色：

input\[type=text\]:focus {
outline: 1px solid #AFECAB;
}

另外，如果想要在输入框获得焦点时改变整个表单项的样式，可以使用:focus-within伪类选择器。例如，可以使用以下代码来在输入框获得焦点时改变表单项的边框颜色和背景颜色：

.el-form-item:focus-within {
border-color: #3677f0;
background-color: #f1f6fe;
}

这样，当用户在输入框中获得焦点时，整个表单项的边框颜色和背景颜色都会发生改变。
#### 引用[.reference_title]
- *1* *2* [关于input标签:focus更改样式的问题](https://blog.csdn.net/weixin_44378321/article/details/86300318)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [css小技巧，input框focus，让外层包裹input的div产生样式变化（可以当做是是div的focus伪类）](https://blog.csdn.net/bittingCat/article/details/120505692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]