样式化p-selectButton

Question

我有一个p-selectButton标记，需要编辑其样式。这是我的HTML和CSS代码：

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

appsig CSS类的结果类似于上图。
我也需要在角上加边框。你能帮我吗？

Answer 1

如果使用的是第三方库，则无法在组件级别修改样式。因此，在这里您需要使用p-selectButton类选择器

将样式放置在全局样式表中，即如下所示的style.css文件中

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