html - CSS - Chrome 中的占位符填充

Question

我想设计我的表单。我有事件占位符，在 Firefox 中它看起来不错:

但在 Chrome 中是一个问题:(不是 textarea，这里是旧版本的 SS，他很好，只有正常输入才有问题)

这是我的 CSS:

.form-control::-webkit-input-placeholder {
    text-align: center;
    font-weight: 200;
    font-size: 30px;
    color: #373737;
}

.form-control:-moz-placeholder {
    text-align: center;
    font-weight: 200;
    font-size: 30px;
    color: #373737;
}

.form-control::-moz-placeholder {
    text-align: center;
    font-weight: 200;
    font-size: 30px;
    color: #373737;
}

.form-control:-ms-input-placeholder {
    text-align: center;
    font-weight: 200;
    font-size: 30px;
    color: #373737;
}

textarea {
    height: 370px;
    padding: 20px !important;
}

input.form-control {
    height: 63px;
}

.form-control {
    color: #373737;
    background: #dbdbdb;
    border: 0;
    margin-bottom: 5px;
}

Answer 1

您在这里对输入的高度进行硬编码:

input.form-control {
    height: 63px;
}

也许您需要删除它并使用填充进行控制，或者如果您有另一个继承填充，则可以使用 box-sizing

input.form-control {
    height: 63px;
    box-sizing: border-box;
}

编辑:

这似乎是一个引导覆盖，因此输入从 .form-control 选择器(不是您的代码，引导代码)获取 height: 34px。您需要通过此更改来避免这种情况:

https://jsfiddle.net/qf8L29u5/2/

删除这个:

#Contact input.form-control {
    height: 63px;
}

然后添加:

#Contact .form-control {
    font-size: 30px;
    height: inherit;
}