Custom inputs with simple_form and Foundation 5 - zurb-foundation

Question

I have created a custom input in simple_form and I'm using 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
The input field created has the default browser style. How do I apply the Foundation text field styles to this currency field so that it looks like all my other text fields. I have tried using the class names used by Foundation for the other fields but it deosn't have any effect. I haven't been able to find any documentation on how to do this. How can I do this?Any help is appreciated.

Answer 1

Have a look at /bower_components/foundation/scss/foundation/components/_forms.scss in your Foundation installation.
Starting from line 407 (of the most latest Foundation) you should see:
/* 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);
}
}
There follows a number of styles that you can copy into your app.scss file to incorporate your <input type="currency"> into your final CSS. For example:
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);
}
}
You could simply add your type into those styles there, but I don't think it's a good idea to change this in foundation's own files as it would probably be removed by future updates to your local foundation.