How to change style in <ons-input>
-
I tried to change the style on <ons-input> and it changed in preview; however, in doesn’t change anything on monaca debug!!! is there a way to change the style of ons element ?
-
@iriekun How did you change it? Did you utilize these styles? http://components.onsen.io/
-
@munsterlander i just add padding. It changes in preview but not in debug. Please reply too!
-
@iriekun How does this look on your device? https://codepen.io/anon/pen/vyGdZK
.myInput { border: 1px solid #080000; -webkit-border-radius: 4px; border-radius: 4px; padding: 8px; }
and
<ons-input class="myInput" placeholder="Some Text"></ons-input>
-
@munsterlander thank you for your help. I decided to use <input> instead of <ons-input> since the style on <ons-input> seem not to compatible with both iOS and android!
-
As a small aside, you can now add a style and it works fine.
-
you should be able to style your ons-input component through creating custom modifier.
Please let me know if this helps.
<ons-button modifier=“small”>Login</ons-button>
in style.css
.button–small{
font-size: .75rem;
}