为什么点击输入框时会出现难看的默认边框，如何让input点击时不显示边框？

Question

**为什么点击输入框时会出现难看的默认边框，如何让input点击时不显示边框？** 在网页开发中，当用户点击一个输入框（``）时，浏览器会为其添加一个默认的焦点边框（通常是蓝色或高亮颜色）。这是由于浏览器内置的CSS样式 `outline` 所致，目的是为了提高可访问性，让用户知道当前哪个元素处于焦点状态。然而，这种默认边框有时可能与页面设计不协调，显得不够美观。 要移除这个默认边框，可以通过CSS设置 `outline: none;` 来实现。例如： ```css input:focus { outline: none; } ``` 需要注意的是，完全移除 `outline` 可能会影响用户体验，尤其是对依赖键盘导航的用户。因此，建议用自定义样式替代默认边框，例如添加边框颜色、阴影或背景变化，以保持良好的交互体验。例如： ```css input:focus { outline: none; border: 2px solid #4CAF50; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); } ``` 这样既能美化界面，又兼顾了可用性。