Wie verhindere ich, dass sich das Element eines HTML5-Formulars leicht bewegt?

Question

Ich habe eine CSS-Eigenschaft ": focus" zu meinen Eingabeelementen hinzugefügt, wo jeder Texteingabe ein fester Rahmen hinzugefügt wird, wenn darauf geklickt wird.

Hier ist eine Jsfiddle auf das Formular, klicken Sie auf die Texteingabe und Sie werden eine leichte Bewegung

<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

bemerken Wie kann ich verhindern, dass diese Bewegung geschieht und Machen Sie die Form fester?

Vielen Dank für Ihre Hilfe!

Answer 1

Sie haben 2 Möglichkeiten:

• eine transparente Grenze auf der nicht-fokussierten Eingangs hinzuzufügen. Auf diese Weise ändert sich die Größe nicht im Fokus, und Sie erhalten den Bewegungseffekt nicht.
• arbeiten mit outline anstelle von . Umrisse nehmen keinen Platz ein und verschieben daher auch das Formular nicht. https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Answer 2

Set eine Grenze auf die Eingabeelemente mit zu beginnen, aber es transparent, wie diese machen: border: 1px solid transparent