Change size of stacked ion-input label

Ionic Framework
1

I have a stacked ion-input like this:

                <ion-item>
                    <ion-input label="Tu usuario o email" labelPlacement="stacked">
                   </ion-input>
                </ion-item>

I want to increase the font-size of the label but can’t find a way to target it with CSS. I tried with .label-text class but it didn’t work.

2

I am also facing this issue. is there any update on this?

3

I tried with .label-text and it does work in Vue if it is applied in your global CSS. It won’t work in scoped CSS since the label is in the Shadow DOM.

A better option though might be using the Label Slot. It is experimental but I tried the following and it worked.

<ion-input label-placement="stacked" value="hi@ionic.io">
  <div slot="label" style="font-size: 20px">Email <ion-text color="danger">(Required)</ion-text></div>
</ion-input>

Last resort is using JS to get access to the Shadow DOM. An example is here and here.

It’s basically accessing it via shadowRoot on the Ionic component.

myToast.value.$el.shadowRoot?.querySelector('.toast-content');

this.modal.shadowRoot
    ?.querySelector('slot')
    ?.assignedElements()
    .find(element => element.classList.contains('ion-page'))
    ?.classList.remove('ion-page')
1 Like