改变基础形式输入字段的高度

Question

我正在使用基金会。在我制作表单的地方，输入字段非常高，如40px。我想减少26px左右的高度。我查看了css设置文件但你可以改变很多而不是高度。当我在下面添加css代码时，它在Chorme中工作，但在FireFox中，texted的底部部分是隐藏的。

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文件中，他们不受框架文件更新的影响，并且会为您的网站范围内的风格提供更多一致性。