How to edit core-elements' style

Ionic Framework ionic-v3
1

Hi guys,

lately i’ve been struggling to customize my apps’ components. For example, now i’m stuck with this problem, look at this screenshot:

image
image.png429×522 4.98 KB

I want to stylize the input field. I want the label to be way bigger and the input field with the number to be way smaller, here are some examples:

User-Friendly-Number-Input-Spinner-with-jQuery-BootstrapdownloadjQuery-Plugin-To-Create-Increment-Decrement-Input-Spinners-handleCounter

I’m having an hard time achieving really simple stuff. Am i missing something? The ionic documentation isn’t helping at this point.

2

Can you provide actual code you struggle with and also more context:

  • are you trying to “modify” Ionic’s components or you build your own?
  • please share the code you have so far (template and css)
3

It’s ionic stock code. I didn’t share my code because it’s literally code i copied and pasted from the documentation: It’s just an ion-input. I’m not looking for feedback on my code, i just want to know what’s the best way to deal with a similar problem. What would you do, how, any why?

Here’s the code btw

      <ion-item>
          <ion-label color="primary" fixed>Days in the past</ion-label>
                   <ion-input type="number"  [(ngModel)]="this.settingsProvider.daysInThePast">
        </ion-input>
      </ion-item>