CSS 移除边框输入焦点

在某些情况下，输入框获取焦点时显示的默认边框可能影响到页面的美感。本文介绍几种CSS技巧，可以帮助你移除输入框的边框焦点。

1. outline属性

在CSS中，我们可以使用outline属性来设置输入焦点时的边框样式。如果将其设置为none，则可以完全移除输入焦点时的边框。

input:focus {
  outline: none;
}

值得注意的是，这种方式可能导致用户无法知道哪个输入框获得了焦点。如果出现这种情况，可以结合其他方式一起使用。

2. box-shadow属性

另一个常见的技巧是使用box-shadow属性来代替outline属性。box-shadow可以使输入框周围显示一个外阴影，这样用户就可以知道哪个输入框获得了焦点。

input:focus {
  outline: none;
  box-shadow: 0 0 3px #0078e7;
}

box-shadow属性的三个参数分别表示水平偏移量、垂直偏移量和阴影半径。第四个参数表示阴影的颜色。

3. border-color属性

在某些浏览器（如Chrome）中，outline属性可能无法生效，此时可以使用border-color属性来设置输入框焦点时的边框颜色。

input:focus {
  outline: none;
  border-color: #0078e7;
}

使用border-color属性的优点是可以保留输入框本身的边框样式。

4. :after伪类

最后一个技巧是使用:before和:after伪类来模拟输入框的外观。下面是实现代码：

input {
  position: relative;
}

input:focus {
  outline: none;
}

input:focus:after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  border: 2px solid #0078e7;
}

这种方式可以有效地模拟输入框的外观，而且不会影响边框外观的其他样式。

总结

本文介绍了四种CSS技巧，可以帮助你移除输入框的边框焦点。它们分别是：outline属性、box-shadow属性、border-color属性和:before和:after伪类。建议根据具体情况选择合适的方法来应用。