I have explained everything in the attached image. and all CSS code are in the stackblitz.
Basically I want a customized Next and Prev button. I want the border of the Next and Prev button to be same as the inside boxes. and with rounded corner. (that means to show that there is a Prev or Next box still available so use can click on Next/Prev
The problem I am getting now is when I click on the Next/Prev, the border is getting bold and blue. I believe it is coming from the default browser(not sure though)
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;
}
Yannick Beauchamp-H :
There's a box-shadow that is added when the button is focused.\nYou can remove it with this style:\n::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus {\n box-shadow: none;\n}\n\nAlso, I think this is what you mentioned in the image, but the previous button have border width set to thick, it should be changed to thin to match the next button:\n::ng-deep .p-carousel .p-carousel-content .p-carousel-prev {\n width: 2.513rem;\n height: 5.68rem;\n border-radius: 25%;\n border-right-color: #99bbff;\n border-right-style: solid;\n border-right-width: thin;\n border-top-color: #99bbff;\n border-top-style: solid;\n border-top-width: thin;\n border-bottom-color: #99bbff;\n border-bottom-style: solid;\n border-bottom-width: thin;\n margin: 0 0 0 -5px;\n}\n\nHere's the updated demo: https://stackblitz.com/edit/primeng-carousel-demo-dbzinn",
2021-02-10T21:16:03