如何在jquery datepicker中更改月份和年份选择器的字体颜色?

问题描述 投票:0回答:1

我试图弄清楚如何在jquery datepicker中更改月份和年份列表选择器的颜色。我的datepicker的结果是这样的

enter image description here

如您所见,月份和年份列表字体显示为白色/空白,我只能在选择月份时看到月份名称和年份。

enter image description here

我试图改变css文件中的颜色,但它不会改变任何东西。

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%;
    color:black;
}

那么,这里的任何人都可以帮我解决如何更改datepicker的字体颜色?

jquery datepicker
1个回答
1
投票

问题:jQuery UI datepicker中的月份和年份下拉列表中有白色

方案:

  • jQuery UI的默认color#333 for Year&Month下拉,所以这里是100%的变化,其他一些类正在覆盖默认的color
  • 您需要根据.ui-datepicker select.ui-datepicker-month的要求更改.ui-datepicker select.ui-datepicker-yearcolor:#000!important;颜色
  • 确保只有在导入jQuery UI css文件后才能应用此新编写的类。
  • 使用开发人员工具栏验证新css是否正在应用或覆盖其他内容。

检查下面的示例,仅使用css将年份和月份的下拉颜色更改为红色:

  $( function() {
        $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  } );
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    color:red!important;
}
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <P>Click on the textbox, see that Month & Year drop down color is changed!</p>
  <input type="text" id="datepicker">
© www.soinside.com 2019 - 2024. All rights reserved.