jquery - 内联更改 jquery datepickers

Question

我使用内联jquery datepicker。

我需要更改.ui-widget-header类

现在是这样的

<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"></div>

并且ui-widget-header具有这种样式

ui-widget-header {
  border: 1px solid #dddddd/*{borderColorHeader}*/;
  background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
  color: #333333/*{fcHeader}*/;
  font-weight: bold;
}

我尝试在我的 scss 中更改它

    .ui-datepicker-inline{
    background: #fff;
  .ui-datepicker-header{
    background: #fff;
    .ui-widget-header{
        border-bottom: 1px solid #efefef;
    }
  }
}

但是边框仍然不仅仅位于底部。

我的问题出在哪里？

Answer 1

您可能想要设置border-color属性:

.ui-datepicker-header.ui-widget-header{
    border-color: transparent transparent #efefef;
}

或者，您也可以设置 border-width 属性，但这可能会稍微改变布局:

.ui-datepicker-header.ui-widget-header{
    border-width: 0 0 1px;
}

在纯 CSS 中，它看起来像这样:

.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}

.ui-datepicker-header.ui-widget-header {
    background: #fff;
    border-color: transparent transparent #efefef;
}

<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"></div>