程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

正如您在我的网站上看到的那样，我正在尝试在表单域处于焦点时实现一个很好的过渡。

我遇到的唯一问题是，当第一个字段（“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-->

解决方案

你有border: none !important在.wpcf7-text课堂上不徘徊的时候。改变它border: 1px solid transparent !important。