Angular Primeng 轮播 - 自定义上一个和下一个按钮

Question

我已经在附图中解释了一切。所有 CSS 代码都在 stackblitz 中。

基本上我想要一个自定义的下一个和上一个按钮。我希望 Next 和 Prev 按钮的边框与内部框相同。并带有圆角。（这意味着表明还有 Prev 或 Next 框仍然可用，因此可以单击 Next/Prev

我现在遇到的问题是当我点击 Next/Prev 时，边框变得粗体和蓝色。我相信它来自默认浏览器（虽然不确定）

https://stackblitz.com/edit/primeng-carousel-demo-i1lnft

   .p-carousel-prev-icon,
.pi {
  display: none !important;
}

.pi {
  display: none !important;
}

.pi-chevron-left:before {
  content: '' !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next::after {
  width: 0.513rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: Roboto;
  transform: scale(2, 4);
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
  width: 2.513rem;
  height: 5.68rem;
  border-radius: 25%;
  border-right-color: #99bbff;
  border-right-style: solid;
  border-right-width: thick;
  border-top-color: #99bbff;
  border-top-style: solid;
  border-top-width: thick;
  border-bottom-color: #99bbff;
  border-bottom-style: solid;
  border-bottom-width: thick;
  margin: 0 0 0 -5px;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next {
  width: 2.513rem;
  height: 5.68rem;
  border-radius: 25%;
  border-left-color: #99bbff;
  border-top-color: #99bbff;
  border-bottom-color: #99bbff;

  border-left-style: solid;
  border-top-style: solid;
  border-bottom-style: solid;
  border-left-width: thin;
  border-top-width: thin;
  border-bottom-width: thin;

  margin: 0 -5px 0 0;
  outline: none !important;
}

.p-carousel-next:focus {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:hover {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:enabled {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-next:active {
  border-left-style: solid !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-left-width: thin !important;
  border-top-width: thin !important;
  border-bottom-width: thin !important;
  outline: none !important;
}

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev::after {
  width: 0.513rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: Roboto;
  transform: scale(2, 4);
}

::ng-deep .p-disabled {
  /* visibility: hidden !important; */
  border-left-color: white !important;
  border-right-color: white !important;
  border-top-color: white !important;
  border-bottom-color: white !important;
}

Answer 1

当按钮获得焦点时会添加一个框阴影。

您可以使用以下样式删除它：

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus {
  box-shadow: none;
}

另外，我想这就是你在图片中提到的，但是上一个按钮的边框宽度设置为粗，应该更改为细以匹配下一个按钮：

::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {
  width: 2.513rem;
  height: 5.68rem;
  border-radius: 25%;
  border-right-color: #99bbff;
  border-right-style: solid;
  border-right-width: thin;
  border-top-color: #99bbff;
  border-top-style: solid;
  border-top-width: thin;
  border-bottom-color: #99bbff;
  border-bottom-style: solid;
  border-bottom-width: thin;
  margin: 0 0 0 -5px;
}

这是更新后的演示：https://stackblitz.com/edit/primeng-carousel-demo-dbzinn

Answer 2

你想保留蓝色边框吗？因为这足以编辑您的按钮 :

.p-carousel-next, .p-carousel-prev {
  box-shadow: none !important;
  border-width: 1px !important;

  /* if you wish to remove the border or change its color */
  /* border: transparent !important; */
}

Angular Primeng 轮播 - 自定义上一个和下一个按钮

Angular Primeng carousel - Custom Prev and Next button

html

css

carousel

primeng

angular