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