围绕表单字段绘制轮廓

问题描述 投票:0回答:1

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

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

你能帮忙吗?

谢谢你。

css forms
1个回答
0
投票

您可以通过使用输入的 outlineoutline-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" />

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

© www.soinside.com 2019 - 2024. All rights reserved.