🔹 在 input:focus 中改变边框颜色

通过改变 input 元素获取焦点时的边框颜色，您可以直观地突出显示用户界面。

**边框** 包含在元素内部。
**影响范围**：元素的大小实际上发生了变化。由于边框扩展了元素的区域，它可能会影响布局。
**调整方法**：边框可以通过 `border-width`、`border-color`、`border-style` 等进行详细设置。
```css input:focus { border-color: #3498db; /* 当获取焦点时，改变边框颜色 */ } ``` 此外，有一种类似的方法，可以使用 `input:focus` 更改 `border-color` 并删除轮廓。
这两种方法的结果是相似的，但它们使用的属性不同。两者都会在焦点时更改边框颜色，但一个使用 `border`，另一个使用 `outline`。

💡 部分代码

input:focus {
  outline-color: #4CAF50; /* 当获取焦点时，改变边框颜色 */
}

💻 完整的工作代码（这是直接在 HTML 中工作的复制粘贴代码）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>在 input:focus 中改变边框颜色</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
</head>
<body>
  <input type="text" placeholder="请输入文本">

  <style>
    input:focus {
      outline-color: #4CAF50; /* 当获取焦点时，改变边框颜色 */
    }
  </style>
</body>
</html>

🎨 实用的聚焦样式设计技巧

表单元素的聚焦样式是提升可用性和无障碍性的关键。使用 outline-color 进行样式设计，既能保证键盘操作时的可视性，又能保持设计一致性。

🌈 颜色设计优化

#4CAF50（绿色）是标准选择，但可以根据网站色彩方案进行调整。例如，#3498db（蓝色）传递信任感，#ff7043（橙色）则提醒注意。保持至少 4.5:1 的对比度比例，有助于视障用户的访问。

✨ 交互反馈

添加 transition: outline-color 0.3s ease 可实现颜色的平滑过渡。结合 box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3)，营造柔和现代的视觉效果。但动画效果应保持适度。

📱 响应式设计支持

移动设备上，适当加粗 outline-width（约 3px）可提高清晰度。暗色模式下，可使用 @media (prefers-color-scheme: dark) 指定较亮的轮廓颜色。

聚焦样式对用户体验影响很大，但过度装饰可能造成混乱。需平衡功能性与美观性，并在整个网站应用统一的样式。