Change font size for ion-searchbar input in Ionic 5

Question

How do I change the font size of ion-searchbar input? Could anyone please help.

<ion-searchbar></ion-searchbar>

Here's what I tried but this does not work

.searchbar-input {
  font-size: 10px;
}

Please refer to the working example which I created in Stackblitz

Klepht

Answer 1

In Ionic 5

global.scss

ion-searchbar {
    .searchbar-input-container {
        input{
            font-size: 14px !important;
        }
    }
}

Dionisio

Answer 2

This my solution in Ionic 5:

Global.css

.searchbarinput {
    input{
       font-size: 20px !important;  
    }
}

In search page:

<ion-searchbar #searchbar (ionInput)="getProdForSearch($event)" class="searchbarinput" placeholder="Buscar produtos..." search-icon="search-sharp"></ion-searchbar>

Scabies

Why is this solution doesn't work on the component's scss page? – Sweeps

Answer 3

Why do you have <style> tag within your home template file? Angular (what Ionic has underneath) template compiler doesn't allow it and will remove any <style> tag you add.

If you have a global .css or .scss file (e.g. index.scss) than you can simply put your .searchbar-input style there, and it should work.

Another way I can think of is, adding encapsulation: ViewEncapsulation.None to your HomePage component, which would be not ideal or could break some things, but still should work.

Check the demo: https://stackblitz.com/edit/ionic-ionsearchbar-styling-vda1eu

What I mean is this:

home.ts

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['./home.scss'], // added
  encapsulation: ViewEncapsulation.None // added
})
export class HomePage { /*... */ }

home.scss

.searchbar-input {
  font-size: 10px !important;
}

Antioch