How to add padding css in ion-searchbar's input

Ionic Framework
1

I want to add css in ion-searchbar’s input

This is ionic code.

Code_pdiYkxPJoA
Code_pdiYkxPJoA950×25 2.79 KB

html view
chrome_FNmbYknw7w

how can I add ?

2 
  ion-searchbar {
    input {
      // your stylings
    }
  }
3

Don’t working in ionic 5

4

@Syalcindag i’m using v5 here the code from my app & –ion-color-headerbg is just a custom color

ion-searchbar{
    background: var(--ion-color-headerbg);
    color: white;
    border: none;   
}
5

ı want to add padding css for input in ion-searchbar

before
chrome_atHifX9I6j

after
chrome_NBVGBjZhdn

this is not working
Code_1J7nqdyt04

6

Is this Image of the html from ionic 5? I think in v5 it uses shadow dom as well

7

this image is browser view in ionic 5 project.

8

This is how I done it in ionic 5.
To remove the input pudding you have to place the custom css in global.scss, don’t use ion-searchbar or it will effect all the searchbars in the project.

Global.scss

input-searchbar {
    input {
        padding-inline-start: 10px !important;
        padding-inline-end: 10px !important;
    }
}

To remove search icon use search-icon as none:

<ion-searchbar search-icon="none" class="input-searchbar"></ion-searchbar>