隐藏焦点上的输入边框

在网页前端开发中，输入框是常见的交互元素之一。在用户输入内容时，输入框通常会出现默认的边框样式。然而，随着网页设计趋向于简洁美观，这些边框并不总是被认为是必要的。同时，在一些场景下，为了让用户更加关注输入内容本身，隐藏输入框的边框也是一种不错的选择。

本篇文章中，我们将介绍如何在输入框焦点上隐藏边框，以及如何在用户输入内容后重新显示边框。

隐藏输入框边框

首先，我们需要为输入框设置一个没有边框的样式：

input {
  border: none;
}

这样，输入框在默认状态下就没有了边框。然后，我们可以使用 :focus 伪类来设置输入框在获得焦点时的样式：

input:focus {
  outline: none;
}

这样，输入框在获得焦点时就不会出现默认的边框样式，从而达到了隐藏边框的效果。

显示输入框边框

一般来说，当用户在输入框中输入内容时，我们会希望显示输入框边框。我们可以使用 :valid 和 :invalid 伪类来判断输入框中是否有合法的内容，从而显示或隐藏边框。

例如，我们可以在输入框中添加 required 属性，并使用如下样式：

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}

这样，当用户输入了合法的内容时，输入框会显示绿色的边框，而当用户输入不合法的内容时，输入框会显示红色的边框。

需要注意的是，在一些浏览器中，:required 和 :valid 等伪类不一定能正常工作。在这种情况下，我们可以使用 JavaScript 来手动添加或删除样式。

结论

通过使用 :focus 伪类和 :valid / :invalid 伪类，我们可以方便地隐藏或显示输入框的边框。结合其他 CSS 样式，我们可以进一步优化输入框的交互效果。

代码片段：

```css
input {
  border: none;
}

input:focus {
  outline: none;
}

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}