ons-input font-size or width

[paul]

Hi,
is there any way we can change the ons-input font-size or width?

thanks.

[Fran Diox]

@paul

You can change ons-input with any other selector, like id or classes:

  ons-input input {
    width: 300px;
    font-size: 22px;
  }

[paul]

Thanks a lot, Fran.
for width: 300px, it did work.

But for font-size: 22px, even i change to font-size: 100px, the font still doesn’t change at all except the input height has changed.

is there something i missed?
Thanks.

[Fran Diox]

@paul It does change for me. Try to put !important in the CSS to make sure other rules don’t overwrite it (or use some more specific rules like using IDs or classes). If you need to modify the height, then just add height rule as well.

[Houssem]

I would like to have a input with size 100% without modify CSS
(If row contain only one input : automatically input width is 100% )

[munsterlander]

@Houssem You don’t have to modify the core CSS files themselves, but if you add a style tag block and specify the appropriate tag, you can make that happen. The following code modifies all inputs:

<style>
ons-input {
  width:100% !important;
}
</style>

Just put this in the head section of your index.html.