HTML/CSS範囲外の入力フォーカス

Question

私のウェブサイトにはフォームがあります。何らかの理由で、クリックした後、自動的に2番目の列のフィールドにフォーカスを合わせるスペースがあります。私はそれを引き起こす可能性のある要素を見つけようとしましたが、運がありません。私はこのような行動を見たことがない。

あなたはこちらのフォームを見ることができます：すべてのヘルプはいいだろう、もう

存在しません。

私はSASSのバージョンを提供することができ、CSSを確認する必要がある場合：

@keyframes input-underline { 
    0% { 
    left: 0; 
    right: 0; 
    } 

    50% { 
    left: 0; 
    right: 100%; 
    background: #ccc; 
    } 

    51% { 
    background: $secondary-color; 
    } 

    100% { 
    background: $secondary-color; 
    left: 0; 
    right: 0; 
    } 
} 

.contact { 
    form { 
     display: block; 
     max-width: 100%; 

     label { 
      position: relative; 
      display: block; 
      width: 100%; 

      &::before { 
       position: absolute; 
       content: ''; 
       bottom: 0; 
       height: 2px; 
       left: 0; 
       right: 0; 
       transition: background .6s linear; 
       background: #ccc; 
      } 

      &.active { 
       &::before { 
        animation: input-underline .6s linear forwards; 
        background: #ccc; 
       } 

       .input-label { 
        top: -16px; 
        font-size: .925rem; 
       } 
      } 

      .input-label { 
       position: absolute; 
       top: 7px; 
       left: 0; 
       transition: top .15s linear, font-size .15s linear; 
       z-index: -1; 
      } 
     } 

     .input { 
      display: block; 
      background: transparent; 
      width: 100%; 
      padding: 10px 0; 
      border: none; 
      font-family: inherit; 
      font-weight: $global-weight-light; 

      &.textarea { 
       min-height: auto; 
       height: 38px; 
       max-width: 100%; 
       max-height: 154px; 
       resize: none; 
       overflow-x: hidden; 
      } 
     } 

     .select, .submit { 
      appearance: none; 
     } 

     .submit { 
      display: block; 
      border: none; 
      width: 100%; 
      max-width: 260px; 
      margin: 0 auto; 
      padding: 10px 0; 
      border-radius: 4px; 
      box-shadow: 0 0 2px 0 #1d1d1b; 
      background: $secondary-color; 
      color: $white; 
      cursor: pointer; 
     } 
    } 
} 

ここ

全コード：

はもう存在しません：もう

は ここ

JSコードが存在しません

編集：重要な場合に備えて、ZURB Foundationを使用します。 EDIT：提供されたリンクはもう機能していないので、削除しました。

Answer 1

<div class="row">をすべて<div class="table">にラップすることをお勧めします。その後、

そして、このCSSを使用します。

.table{ 
    display:table; 
} 
.row{ 
    display:table-row; 
} 
.row div{ 
    display:table-cell; 
} 

そして取り除く：

.row::before, 
.row::after { 
    display: table; 
    content: ' '; 
}