Как изменить цвет шрифта для выбора месяца и года в jquery datepicker?

Question

Я пытаюсь выяснить, как изменить цвет списка выбора месяца и года в jquery datepicker. Результат моего выбора даты такой:

Как видите, шрифт списка месяца и года отображается белым / пустым, название месяца и года я вижу только при их выборе.

Я пытался изменить цвет в css-файле, но он ничего не меняет.

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

Итак, кто-нибудь здесь может помочь мне решить, как изменить цвет шрифта моего указателя даты?

Answer 1

Проблема: в jQuery UI белый цвет в выпадающем списке месяц и год datepicker

Решение:

• jQuery UI по умолчанию color равно #333 для выпадающего списка Год и Месяц, поэтому здесь изменение на 100%, что какой-то другой класс перезаписывает это значение по умолчанию color

• Вам нужно изменить .ui-datepicker select.ui-datepicker-month и .ui-datepicker select.ui-datepicker-year цвет в соответствии с вашим требование как color:#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">