覆蓋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屬性？

回答

相關問題