更改 jquery datepickers 内联

Posted 2023-03-07

【中文标题】更改 jquery datepickers 内联

【英文标题】：Change jquery datepickers inline

【发布时间】：2018-09-13 20:28:18

【问题描述】：

我使用 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;
    
  

但边框仍然不只是在底部。

我的问题在哪里？

【参考方案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>

【讨论】：

我只想留下border-bottom

是的，我明白你的问题。

但是我不能用它，有border-bottom？

这只会重新定义底部边框。 .ui-widget-header 的其他边界仍然有效。

看看嵌套类和多类的区别可能也有用：***.com/questions/11084757/…