时间戳

首页 > 解决方案 > 样式化 p-selectButton

css - 样式化 p-selectButton

问题描述

我有一个 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 类的结果如上图所示。 我也需要在角落有边框。你能帮我解决这个问题吗？在此处输入图像描述

标签： cssangularprimeng

解决方案

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

html

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

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

这是 Stackblitz 上的解决方案

推荐阅读