CSS 焦点更改颜色

CSS中可以通过:focus伪类来针对元素获取焦点时进行样式修改，比如改变边框颜色、背景颜色等，可以增强页面互动性及用户体验。

示例代码

input:focus {
  outline: none; /* 去除默认边框 */
  border-color: #2979ff; /* 改变边框颜色 */
  box-shadow: 0 0 5px #2979ff; /* 改变阴影样式 */
}

说明

• 使用:focus伪类来选中获取焦点的元素。
• outline: none;可以去除元素获取焦点时的默认边框。
• border-color: #2979ff;可以改变元素的边框颜色。
• box-shadow: 0 0 5px #2979ff;可以增加元素的阴影效果。

注意事项

• 在应用:focus伪类时，应该同时考虑非焦点状态下的元素效果，以保持整体风格一致。
• 在应用box-shadow属性时需要注意，如果元素有边框，阴影可能会超出元素边界，需要做一定的调整。
• 应该考虑到网站的可访问性，当用户不能使用鼠标进行操作时，还需要通过键盘等方式使用:focus伪类效果。