围绕表单字段绘制轮廓

Question

我试图弄清楚当选择字段时如何在输入字段周围构建轮廓。见下图。

我尝试检查元素，但没有找到如何添加轮廓。

你能帮忙吗？

谢谢你。

Answer 1

您可以通过使用输入的 outline 和 outline-offset CSS 属性来实现此目的：

body {
  background-color: #333;
}

.input {
   background-color: #fff;
   border: none;
   padding: 5px;
   margin: 1rem;
   border-radius: 1px;
}

.outlined {
   outline: 2px #fff solid;
   outline-offset: 2px;
}

<input type="text" class="input" />
<input type="text" class="input outlined" />

请注意，它将禁用浏览器默认的大纲行为。