Formularfelder Position Problem im Fokus

Question

Wie Sie auf meiner Website sehen können, versuche ich einen schönen Übergang zu implementieren, wenn ein Formularfeld im Fokus ist.

Das einzige Problem, das ich habe, ist, dass, wenn das erste Feld ("Prenom") im Fokus ist, eine riesige Lücke zwischen diesem Feld und dem darunter liegenden Feld ("Telefon") erstellt. Es ist wahrscheinlich wegen der transform: translateY(-2px);, aber ich verstehe nicht, warum es diese riesige Lücke nur unter dem "Prenom" -Feld gibt und keine Ahnung, wie das zu beheben ist.

Ich habe den vollen Code nicht gepostet, weil es zu lang ist (die Seite benutzt Wordpress), aber hoffentlich hilft dir der Live Link weiter.

Vielen Dank für Ihre Hilfe

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar { 
background-color: #eee !important; 
border: none !important; 
width: 100% !important; 
-moz-border-radius: 0 !important; 
-webkit-border-radius: 0 !important; 
border-radius: 0 !important; 
font-size: 16px; 
color: #999 !important; 
padding: 16px !important; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

    -webkit-transition-duration: .3s; 
    transition-duration: .3s; 
    -webkit-transition-property: -webkit-transform,box-shadow; 
    transition-property: transform,box-shadow; 
    -webkit-transition-timing-function: ease-in-out; 
    transition-timing-function: ease-in-out; 
    box-shadow: 0 1px 1px rgba(0,0,0,.1); 


} 


.wpcf7-text:hover { 
    box-shadow: 0 2px 10px rgba(0,0,0,.05); 
} 

.wpcf7-text:focus, .wpcf7-textarea:focus { 
    transform: translateY(-2px); 
    box-shadow: 0 20px 25px rgba(0,0,0,.15); 
    cursor: default; 
    border: 1px solid #D7E9BC !important; 
    background-color: #fff !important; 
} 

HTML

<div id="responsive-form" class="clearfix"> 

<div class="form-row"> 
<div class="column-half">[text* first-name placeholder "Prénom"]</div> 
<div class="column-half">[text* last-name placeholder "Nom"]</div> 
</div> 

<div class="form-row"> 
<div class="column-half">[email* your-email placeholder "E-mail"]</div> 
<div class="column-half">[text* your-phone placeholder "Téléphone"]</div> 
</div> 

<div class="form-row"> 
<div class="column-full">[textarea* your-message placeholder "Votre message"]</div> 
</div> 

<div class="form-row"> 
<div class="column-half">[recaptcha]</div> 
<div class="column-half">[submit "Envoyer"]</div> 
</div> 

</div><!--end responsive-form--> 

Answer 1

Sie haben border: none !important in der .wpcf7-text Klasse, wenn nicht schweben. Ändern Sie es für border: 1px solid transparent !important.

Answer 2

Scheint wie das ist ein Clearfix-Problem.

Es gibt einige Tricks, die ich selbst gerne für clearfix Probleme verwenden:

hinzufügen entweder overflow: auto; oder display: inline-block; (ich glaube, overflow: hidden; sollte auch funktionieren), um Ihre .form-row Klasse, und das Problem verschwunden sein sollte.