<serach-bar> styling in Ionic 4 Beta

Hi,
I am making a prototype with Ionic 4 Beta.

I added a search-bar in my header with following code:

<ion-toolbar color='primary' no-border>
      <ion-searchbar placeholder='Search by Restaurant, Cuisine, etc.,'></ion-searchbar>
</ion-toolbar>

Now I need to apply some styles, like changing font-color, apply border-radius. I tried applying the styles in my component’s scss file as follows,

ion-searchbar {
color : #f00;
border-radius: 25px;
}

.searchbar-input {
color : #f00;
border-radius: 25px;
}

But it’s not working. Is it something to do with webcomponents? or which css selector should I use?

Update 1:

.searchbar-md .searchbar-input {
    color: #f00;
    border-radius: 25px;
}

works with search bar in Ionic 3 project. But not with Ionic 4

2 Likes

This worked when I put it in the global.scss styles for Ionic 4

.searchbar-input {
    background: #FFF !important;
    border-radius: 30px !important;
    height: 40px !important;
    max-width: 400px;
    font-size: 1.25em !important;
    border: 1px solid transparent;
}
7 Likes

You code is not working for me.

in ionic3 i would do something like below:

ion-searchbar{
input{
border: 1px solid gray;
}
}

But in ionic4 it is not working

In ionic 4 , you can implement by using variable as it uses shadow DOM.
You will do like this
.class{
–color :white ;// or using RGB . this is used to change color
}

same you can use for background and other . Check their documentation of css variable .

Yes, this is working for me, too…But do you understand, why this isn’t working when you put this in your page.scss file? :thinking:

2 Likes

I have the same doubt. Why is it working if you put in the global.scss but not in the page.scss file?

You do it by setting the custom css properties provided for the searchbar component…

I guess if there are no custom properties provided you are out of luck?

worked nicely! thanks.

1 Like

thanks man!
I was losing very time with it.

1 Like

what if I want to use [ngClass]? For example, if user types and data is available, I would like to change the border-radius. But If theres no data, I would like to keep the original border-radius of the search bar input. How would you approach that?

Hi Genius, you save my time. Perfectly working…!!
Happy coding

Yes, This also works for me . But have the same doubt why not workinh in page.scss file and why working in global.scss