css - 更改基础表单输入字段的高度

Question

我正在使用基金会。在我制作表单的地方，输入字段非常高，例如 40px。我想让高度更小，比如 26px 左右。我查看了CSS设置文件，但你可以改变很多，但不能改变高度。当我添加下面的 css 代码时，它在 Chorme 中有效，但在 FireFox 中，文本的底部部分被隐藏。

input {
    height: 26px;
}

有人有想法吗？

Answer 1

最简单、最残酷(最残酷？)的方法是:

input {
    height: 26px !important;
}

在您的app.scss中并编译您的CSS。

但是，还有更好的方法..

检查 /bower_components/foundation/scss/foundation/components/_forms.scss 中的文件，您会看到表单元素的高度基于字体大小和表单 -间距

height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));  // line 121

默认情况下(在同一文件中)是:

$form-spacing: rem-calc(16) !default;    // line 14
$input-font-size: rem-calc(14) !default; // line 26

这些可以在您的 _settings.scss 文件(与 app.scss 相同的目录)中找到并取消注释，以便在再次编译之前覆盖。好好测试一下，因为这些是一般设置，会对大多数(如果不是全部)表单元素产生影响。

从好的方面来说，在您的 _settings.scss 文件中，它们不受框架文件更新的影响，并且将使您的站点范围样式更加一致。