样式 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 class 的结果如上图所示。
我也需要在角落有边框。你能帮我解决这个问题吗？

Answer 1

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

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

样式 p-selectButton

Styling p-selectButton

css

primeng

angular