移除引导输入中的发光 - CSS

在一些时候，当用户在表单中输入时，表单元素会显示一个发光的轮廓，以帮助用户更好地识别正在输入的元素。然而，这种效果可能并不适合所有情况，比如当你在构建一个自定义的表单时。这就需要你通过CSS将其移除。

以下是如何在CSS中移除这种发光效果的步骤。

第一步：设置元素的 outline 属性

首先，你需要设置元素的 outline 属性。将它的值设为 none，这个属性定义了元素的轮廓线。

input {
  outline: none;
}

第二步：对于一些必须有轮廓线的元素，使用 box-shadow

如果你有一些必须有轮廓线的元素，可以考虑使用 box-shadow 属性来替代 outline。将 box-shadow 的值设为一个深色的阴影，看起来会更自然。

input[type="submit"],  input[type="reset"],  input[type="button"],  button {
  box-shadow: none;
}

示例

下面是一个示例CSS代码，它移除了所有表单元素的发光效果：

/* 移除所有表单元素的发光效果 */
input, select, textarea {
  outline: none;
  box-shadow: none;
}

/* 排除 type 为 submit、reset、button 的元素 */
input[type="submit"],  input[type="reset"],  input[type="button"],  button {
  box-shadow: none;
}

现在，当用户在表单中输入时，将不会有任何发光的效果。

以上就是如何在CSS中移除引导输入中的发光效果的方法。