<serach-bar> styling in Ionic 4 Beta

Ionic Framework
1

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
2

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;
}
8 Likes
3

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

4

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 .

5

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
6

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

7

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?

8

worked nicely! thanks.

1 Like
9

thanks man!
I was losing very time with it.

1 Like
10

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?

11

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

12

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

13

This my solution in Ionic 5:

Global.css

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

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