更改 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>