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

应用CSS类的结果如上图所示。 qazxsw poi 我也需要在角落里设置边框。你能帮帮我吗？

Answer 1

如果您使用的是第三方库，则无法在组件级别修改样式。所以在这里你需要使用类选择器将你的样式放在全局样式表中，即如下所示的style.css文件

HTML

p-selectButton

style.css文件

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

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