feat: change the border radius of the ion-searchbar

[Kernolsie]

Feature Request

Ionic version:
Anything 4 really...
[x] 4.x

Describe the Feature Request
I have the intense desire to change the border radius of the ion-searchbar, is it possible to expose a --border-radius CSS custom property variable for the component?

Describe Preferred Solution
Please expose a --border-radius CSS custom property variable for the ion-searchbar

Describe Alternatives
No normal CSS styling reaches the component because of shadowDOM. This is what I have tried:

ion-searchbar{
.searchbar-input-container{
.searchbar-input{
border-radius: 30px !important;
}
}
}

Related Code
Not relevant

Additional Context
Not relevant

[SulimanTwfiq]

remove .searchbar-input-container ,so at the end it should be like this
ion-searchbar{
.searchbar-input{
border-radius: 30px;
}
}
it works for me .

same problem
ion-searchbar{ .searchbar-input{ border-radius: 90px; } }

[Kernolsie]

@RadGade As a workaround you can simply move your CSS styling to the global.scss and then it works for me:

ion-searchbar{
    .searchbar-input-container{
        .searchbar-input{
            border-radius: 30px !important;
        }
    }
}

@Kernolsie Thanks man, it worked

[sebinbenjamin]

// In global.scss
ion-searchbar {
  input {
    border-radius: 30px !important;
  }
}

Also works !

[sebinbenjamin]

#18247 seems to be a duplicate of #17426

[liamdebeasi]

Thanks for the issue. This has been resolved via #20662 and will be available in an upcoming release of Ionic Framework.