CODEWITHSUNDEEP
cssangularprimeng
Alpha Bravo Charlie ...
Alpha Bravo Charlie ...

Reputation: 820

Styling p-selectButton

I have a p-selectButton tag, which I need to edit its styling. Here come my HTML and CSS codes:

<p-selectButton class="pSelectButtonStyle" [options]="myTags" > </p-selectButton>

.pSelectButtonStyle {
  border-top-left-radius: .3em;
  border-top-right-radius: .3em;
  border-bottom-left-radius: .3em;
  border-bottom-right-radius: .3em;
  border-left: solid #cccccc .07em;
  border-right: solid #cccccc .07em;
}

The result of applyig the CSS class looks like the above image. enter image description here
I need to have border on the corners, too. Can you help me with this?

Upvotes: 2

Views: 8087

Answers (1)

TheParam
TheParam

Reputation: 10541

If you are using a third party library then you can not modify the style at the component level. So here you need to place your style in global stylesheet i.e style.css file like below using p-selectButton class selector

html

<div class="my-container" >
<p-selectButton [options]="myTags" > </p-selectButton>
</div>

style.css

.ui-buttonset:not(.ui-splitbutton) .ui-button {
  border-top-left-radius: .3em;
  border-top-right-radius: .3em;
  border-bottom-left-radius: .3em;
  border-bottom-right-radius: .3em;
  border-left: solid #cccccc .07em;
  border-right: solid #cccccc .07em;
  background: white;
}

Here is Solution on Stackblitz

Upvotes: 2

Related Questions