simple form - Custom inputs with simple_form and Foundation 5 -
I have created a custom input in simple_form and I am using Foundation 5.
class currency input & lt; 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
In the input field created is the default browser style. How can I apply the Foundation text field styles to this currency field so that it looks like all my other text fields? I have tried to use the class names used by the Foundation for other areas but it has no effect. I can not find any document to do this. How can I do this? Any help is appreciated.
/ bower_components /
Starting from the line 407 (in the most recent foundation) you should see: / P>
/ * We use it for basic structure elements / basic input type [Type = "text"], input [type = "password"], to get the basic style of input [type = "date"]. Input [type = "date time"], input [type = "day-time-local"], input [type = "month"], input [type = "week"], input [type = "email"], Input [type = "number"], input [type = "search"], input [type = "tele"], input [type = "time"], input [type = "url"], textera {-webkit -Usage: None; Webkit-boundary-radius: 0 pixels; Include @Format element; @if $ input-included-brightness-effect == false {@ contains single-transition (all, 0.15 s, linear); } & Amp; .radius {@ Include radius ($ input-limit-radius); }}
There are several styles followed, which you can call your & lt; To insert input type = "currency" you can copy it to your
For example in your final CSS: app.scss
file. & Gt;
input [type = "currency"] {-webkit-appearance: none; Webkit-boundary-radius: 0 pixels; Include @Format element; @if $ input-included-brightness-effect == false {@ contains single-transition (all, 0.15 s, linear); } & Amp; .radius {@ Include radius ($ input-limit-radius); }}
You can simply add your style to those styles, but I do not think it's a good idea to convert it to its foundations of the foundation because future updates For your local foundation
Comments
Post a Comment