Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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;
}