删除输入 CSS 的轮廓

在 Web 开发中，有一些默认的轮廓样式会在输入框等元素上显示，用于在用户操作时提供视觉反馈。然而，这些默认样式并不总是符合设计要求，或者干脆就是一些“丑陋”的方框。因此我们需要对这些轮廓样式进行删除或修改。

1. CSS 属性 outline

在 CSS 中，outline 属性用于为元素添加轮廓线。默认情况下，轮廓线为蓝色，宽度为1像素。

我们可以通过将此属性设置为空来删除轮廓线，如下：

input, textarea, button {
  outline: none;
}

以上代码将会删除所有输入框、文本框和按钮的轮廓线。请注意，这种做法并不被所有设计师和开发者推荐，因为轮廓线有时候可以使得输入是更容易被察觉的。

2. outline-style

outline-style 属性用于指定轮廓线的样式。如果我们没有使用 outline 属性，那么可以使用这个属性单独修改轮廓线样式。默认值为 solid，我们可以通过将其设置为 none 或其他值来删除轮廓线。

例如，将它设置为 dotted 可以产生一种虚线效果：

input:focus, textarea:focus {
  outline-style: dotted;
}

3. outline-width

outline-width 属性用于指定轮廓线的宽度，它的默认值为 1 像素。我们可以通过将其设置为 0 来删除轮廓线。

input, textarea, button {
  outline-width: 0;
}

4. outline-color

outline-color 属性用于指定轮廓线的颜色。和其它属性一样，我们可以将它的值设置为空来删除轮廓线。

input:focus, textarea:focus {
  outline-color: transparent;
}

以上代码将删除所有输入框和文本框的轮廓线，并且不会有颜色产生。如果我们更想使用一种不同的颜色，可以指定 outline-color 属性的其他值，比如：

input:focus, textarea:focus {
  outline-color: red;
}

总结

删除输入框和文本框的轮廓线并不是一件麻烦的事情，我们只需要简单设置一些 CSS 属性即可。如果你想要删除轮廓线，可以考虑使用前四个属性中的任何一个。如果你想改变它的颜色、宽度或样式，同样可以使用这些属性完成。