CODEWITHSUNDEEP
ionic-framework
chrisvor
chrisvor

Reputation: 41

ion-segment-button indicator outline border

I'm using Ionic/Angular v5 and I'm trying to style an ion-segment set of buttons so as to have an OUTLINE border as an indicator I tried using the shadow parts "indicator" and "indicator-background" in order to set the color and thickness of the border, and the background color to be transparent so as to show as an "outline", but it does not get the settings

I am getting this but what I am trying to achieve is have a red border AROUND the checked button and still show the "original" background color of the button.

My CSS is:

&::part(indicator) {
  height: 100%;
  color: var(--ion-color-tertiary);
  border-width: 3px;
  border-color: var(--ion-color-tertiary);
}
&::part(indicator-background) {
  color: transparent;
}

Any ideas on how to achieve the style I'm looking for ?

Many thanks Chris

Upvotes: 0

Views: 2416

Answers (1)

chrisvor
chrisvor

Reputation: 41

Solved it by changing the CSS styles to:

&::part(indicator) {
  height: 100%;
  border-width: 3px;
  border-color: var(--ion-color-tertiary);
  border-style: inset;
}
&::part(indicator-background) {
  background: transparent;
}

Upvotes: 3

Related Questions