Question

我使用jquery datepicker inline。

我需要更改.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>

更改内联的jquery datepickers

1 个答案: