覆盖JQuery UI CSS属性？

我想重写datepicker的JQuery CSS属性，但它不显示任何效果。我想在datepicker里面增加月份组合框的宽度。覆盖JQuery UI CSS属性？

我已经做

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { 
width: 50% !important; 
}

默认情况下为49％覆盖的JQuery UI CSS的财产。它似乎没有工作。请指导。

来源

2016-09-01 sTg

它应该工作。你确定你正确地包含CSS吗？你能提供你的代码吗？ – Justinas

有几件事情可以。您的选择器可能是错误的，或者不够具体。如果您复制了确切的选择器，请仔细检查您是否复制了他们使用的确切选择器。

样式表的顺序可能是错误的。确保jquery.ui.css和主题文件在你的之前被加载。

它可能是别的。我发现在Chrome开发人员工具的样式面板中调试这样的最佳方法是。转到标有计算结果的标签;选择宽度;并点击width，它会将您带到创建该规则的选择器。取消选中宽度规则，然后查看width规则的应用情况。最终，您将取消选中所有应用的宽度规则，或找出哪一个覆盖了您的宽度规则。

您还可能发现其他类似的东西 - 您的规则根本没有加载。也许你正在使用你的样式表的缓存版本等。

这个规则肯定是可重写的 - 有一个逻辑错误或某个地方的错字，你只需要找到它。

来源

2016-09-01 13:52:56 user1167442

您可以使用：

#ui-datepicker-div { 
     width: 50%; !important; 
    }

或：

.ui-datepicker.ui-widget { 
     width: 50%; !important; 
    }

或者，更准确地说，在jQuery的准备，你可以这样做：

$(function() { 
 
    $("#datepicker").datepicker().on('focus', function(e) { 
 
    $("#datepicker").datepicker('widget').width('90%'); 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 
<p>Date: <input type="text" id="datepicker"></p>

使用简单的样式表：

$(function() { 
 
    $('#zzz').datepicker(); 
 
    $("#datepicker").datepicker(); 
 
});

#ui-datepicker-div { 
 
    width: 90%; !important; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 

 
<p>Date: <input type="text" id="datepicker"></p> 
 
<p>Date: <input type="text" id="zzz"></p>

所以，我建议使用第一个，因为这样你可以设置一个特定的日期选择器的宽度，而不是所有的。

无论何时打开日期选择器，都会将新的div元素添加到文档中。使用jQuery 1.12此面板的ID始终名称'UI的日期选择器-DIV'

来源

2016-09-01 14:20:25 gaetanoM

覆盖JQuery UI CSS属性？

回答

相关问题