jquery - HTML/CSS 输入焦点超出范围

Question

我的网站上有一个表单，出于某种原因，有一些空间在单击它们后会自动聚焦到第二列中的字段。我试图找到任何可能导致它但没有运气的元素。我从未见过这样的行为。

你可以在这里看到表格:不再存在

任何帮助都会很好。

如果你需要看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 基金会，以防它很重要。编辑:提供的链接不再有效，所以我删除了它们。

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: ' ';
}