How to change style in <ons-input>

[iriekun]

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 ?

[munsterlander]

@iriekun How did you change it? Did you utilize these styles? http://components.onsen.io/

[iriekun]

@munsterlander i just add padding. It changes in preview but not in debug. Please reply too!

[munsterlander]

@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>

[iriekun]

@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!

[jacques]

As a small aside, you can now add a style and it works fine.

[boredomkillsme91]

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;
}