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

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您将看到表单元素的高度基于font-size和form-spacing

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文件中,它们不受框架文件更新的影响,并且可以使您在站点范围的样式中更加一致.