表格字段位置问题焦点

Question

正如您在我的网站上看到的那样，当表单字段处于焦点时，我正在尝试实现一个很好的转换。

我唯一的问题是当第一个字段（“Prenom”）处于焦点时，它会在该字段和下面的字段（“电话”）之间产生巨大的差距。它可能是由transform: translateY(-2px);引起的，但我不明白为什么只有在“Prenom”字段之下存在这个巨大的差距，并且不知道如何解决这个问题。

我没有发布完整的代码，因为它太长了（该网站使用wordpress），但希望实时链接可以帮助你。

非常感谢你的帮助

.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

不悬停时，您在border: none !important课程中有.wpcf7-text。将其更改为border: 1px solid transparent !important。

Answer 2

这似乎是一个明确的问题。

我喜欢将自己用于clearfix问题的技巧很少：

添加overflow: auto;或display: inline-block;（我认为overflow: hidden;也应该有效）到您的.form-row课程，问题应该消失。