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

如果你有另一个继承填充，也许你需要删除它并用paddings控制，或者用box-sizing玩

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

编辑：

它似乎是一个引导覆盖，因此输入从height: 34px选择器（而不是您的代码，引导代码）获得.form-control。你需要避免这种变化：

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

删除它：

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

并添加：

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