Greg Greg - 1 year ago 68
CSS Question

Form fields position issue on focus

As you can see on my website, I'm trying to implement a nice transition when a form field is on focus.

The only issue that I have is that when the first field ("Prenom") is on focus, it creates a huge gap between this field and the field below ("Telephone"). Its probably due to the

transform: translateY(-2px);
but I don't understand why there's this huge gap only below the "Prenom" field and have no idea how to fix that.

I didn't post the full code because it's too long (the site uses wordpress), but hopefully the live link should help you.

Many thanks for your help

enter image description here

.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;


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

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

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

Answer Source

You have border: none !important in the .wpcf7-text class when not hovering. Change it for border: 1px solid transparent !important.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download