Question

我在simple_form中创建了一个自定义输入，我正在使用Foundation 5。

class CurrencyInput < SimpleForm::Inputs::Base
  def input
    input_html_classes.unshift("string currency") 
           input_html_options[:type] ||= input_type if html5?
    "$ #{@builder.text_field(attribute_name, input_html_options)}".html_safe
  end
end

创建的输入字段具有默认浏览器样式。如何将Foundation文本字段样式应用于此货币字段，使其看起来像我的所有其他文本字段。我已尝试使用Foundation用于其他字段的类名，但它没有任何效果。我无法找到有关如何执行此操作的任何文档。我该怎么做？感谢任何帮助。

Answer 1

在基金会安装中查看/bower_components/foundation/scss/foundation/components/_forms.scss。

从第407行（最新的基金会）开始，您应该看到：

/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  @include form-element;
  @if $input-include-glowing-effect == false {
      @include single-transition(all, 0.15s, linear);
  }
  &.radius {
    @include radius($input-border-radius);
  }
}

您可以将许多样式复制到app.scss文件中，以将<input type="currency">合并到最终的CSS中。例如：

input[type="currency"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  @include form-element;
  @if $input-include-glowing-effect == false {
      @include single-transition(all, 0.15s, linear);
  }
  &.radius {
    @include radius($input-border-radius);
  }
}

你可以简单地将你的类型添加到那些样式中，但我不认为在基金会自己的文件中更改它是一个好主意，因为它可能会被你当地基金会的未来更新删除。

使用simple_form和Foundation 5进行自定义输入

1 个答案: