如何防止HTML5表单元素轻微移动？

Question

我在输入元素中添加了一个“：focus”CSS属性，如果点击它，它会为每个文本输入添加一个实线边框。

这是表格的Jsfiddle，点击任何文字输入，你会发现轻微的动作

<form>
<h1>Send me a Message</h1>
<label for="name">Name</label><br>
<input type="text" id="name" class="inpt-styles"><br>
<label for="email">Email</label><br>
<input type="text" id="email" class="inpt-styles"><br>
<label for="message">Message</label><br>
<textarea row="5" col"8" id="message" class="inpt-styles txtarea"></textarea><br>
<button type="submit">Send</button>

JSFIDDLE

如何防止这种情况发生并使表格更加稳固？

感谢您提供任何帮助！

Answer 1

您有两个选择：

• 在非聚焦输入上添加透明边框。这样，尺寸不会改变焦点，你不会获得移动效果。
• 使用outline代替border。轮廓不占用空间，因此也不会移动表格。 https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Answer 2

在输入元素上设置一个边框，但要使其透明，如下所示： border: 1px solid transparent