Ionic-framework: 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 .

[RadGade]

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;
        }
    }
}

[RadGade]

@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 https://github.com/ionic-team/ionic/pull/20662 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.