如何防止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

你有2种选择：

• 在非集中输入添加一个透明的边框。这样，尺寸就不会在焦点上发生变化，并且您将无法获得移动效果。
• 与outline一起使用而不是border。轮廓不占用空间，因此也不会移动表单。 https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Answer 2

设置输入元素边界开始，但使它透明，像这样： border: 1px solid transparent