css - 如何使用css伪属性添加背景颜色

Question

我正在尝试实现屏幕截图中所附的结果。但是我无法达到结果。不应引入任何新的 DOM 元素来实现所需的输出。

打开演示链接选择日期范围，开始日期和结束日期选择不符合预期。

demo link

Answer 1

我尝试了您的 CSS 并且能够实现您正在寻找的东西。

也许可以尝试以下操作:

.DayPicker-Day--start {
    color: #fff !important;
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
}

.DayPicker-Day--end {
    color: #fff !important;
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
}

.DayPicker-Day--selected {
    background-color: #C4C4C4 !important;
    color: #1C1C1C;
    z-index: 1;
}

.DayPicker-Day--selected::after {
    content: '';
    position: absolute;
    background-color: #1C1C1C !important;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    right: 0;
    border-radius: 50%;
}

我认为 z-index 值可能是造成问题的原因。

Here's a link到我的检查员的屏幕截图，以防有帮助。我将 #ccc 作为占位符但忘记更改它，所以只需将其更改为您实际想要的背景灰色即可。