HTML/CSS輸入焦點範圍之外

我有我的網站的一種形式，由於某種原因，也有一些空間，點擊它們自動聚焦的領域在第二列之後。我試圖找到任何可能導致它的元素，但沒有任何運氣。我從來沒有見過這樣的行爲。HTML/CSS輸入焦點範圍之外

你可以在這裏看到的形式：已經不

存在任何幫助將是很好。

如果你需要看的CSS我可以提供一個SASS版本：

@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基金會，以防萬一它很重要。編輯：提供的鏈接不再工作，所以我刪除了它們。

來源

2017-06-17 Jeremy

你有任何HTML？ –

@LouysPatriceBessette我在上面的圖片中標記了空格。我實際上要求更多的人在多臺PC上嘗試，並且他們都有同樣的問題。 https://i.stack.imgur.com/oE0oQ.jpg – Jeremy

我明白了......這就是爲什麼我刪除了我的評論。這很奇怪，我同意。 –

我建議你換你所有的<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: ' '; 
}

來源

2017-06-17 14:19:42

是的，問題是這是基礎框架的一部分......但無論如何我只是添加了這個：.contact .row :: after {content：normal;}並且它解決了這個問題。謝謝！ – Jeremy

何......我明白了。那麼，我會留下我的答案，因爲這是它應該的方式。但是您的評論對於解決這個「基礎」問題是有用的。 –

HTML/CSS輸入焦點範圍之外

回答

相關問題