Change css of searchbar - ionic 4

Ionic Framework ionic-v3
1

Hi guys, is it possible to change css from a ionic object? And if it is how do I do it??

For example, I have an < ion-searchbar > and when the app is running a < div > is created inside the < ion-searchbar > and an < input > inside the < div >, what I want is to change the css of the classes of < input > (searchbar-input sc-icon-searchbar-md).

image
image1058×169 11.3 KB

I’ve tried something like this in scss, but it didnt work

#search>div>input[type=search]{
-webkit-padding-end: 0px;
padding-inline-end: 0px;
}

i’m newbie using ionic so any help i would appreciate, thanks!

2

Could you show some code and screenshots of what you want / what happens please ?

Try this:

<ion-searchbar no-padding></ion-searchbar>

or:

<ion-searchbar padding-end="0"></ion-searchbar>
3

what happens: image --> image

what i want: image -->image

The problem is that I dont know how to change or override padding-end value to 0px.

4

I did this once for an <ion-item>, because I had the same problem as you. It worked. You can try to do the same with the <ion-searchbar> classes, let me know if you managed to do it :wink:

div.item-native {
  div.item-inner {
    padding-inline-end: 0 !important;
    -webkit-padding-end: 0 !important;
  }
}
5

didnt work!!

Am I setting it up rightfully?

#search {
      div {
          input[type=search] {
              padding-inline-end: 0 !important;
              -webkit-padding-end: 0 !important;
          }
      }
}
6

I’m trying to do it too but it doesn’t work, let’s stay in touch if we find something

1 Like
7

Try out the solution, I mentioned here:

Hopefully it helps you guys.

Cheers
Unkn0wn0x

1 Like
8

worked for me! after trying out all other solutions. Figuring out how to target the icon now.