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 ]