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

编辑：

似乎是引导程序覆盖，因此输入的height: 34px为.form-control选择器（不是您的代码，引导程序代码）为.form-control 。 您需要通过以下更改来避免这种情况：

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

删除此：

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

并添加以下内容：

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