Невозможно изменить цвет фона ввода при использовании jQueryUI datepicker

Question

Я пытаюсь добавить функцию, с помощью которой пользователь может выбрать дату после нажатия на значок часов.Я реализую это с помощью компонента jqueryui datepicker ().Проблема, с которой я столкнулся, заключается в том, что я не могу изменить цвет фона области ввода даты.предполагается один серый цвет, затем белый, затем серый и т. д.

Вот мой код:

html

     <ul>
            <li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>set deadline<input type="text" class="datepicker"></li>
            <li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>bbbbbbb<input type="text" class="datepicker"></li>
            <li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>ccccccc<input type="text" class="datepicker"></li>
     </ul>

javascript

     var getinput = (function () {
    //grab text from input form
    var inputtext = $('#inputText').val();

    //empty the input form
    $('#inputText').val("");

    //create a new li and add it to the ul
    $('ul').append('<li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>' + inputtext + '<input type="text" class="datepicker"></li>')

    //create deadline by using jQueryui.datepicker() component 
    $(function () {
        $(".datepicker").datepicker({ minDate: new Date() });
    });
    $.datepicker.setDefaults({
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "deadlineicon.svg",
        buttonText: "Set Deadline"
    });
    $('ul').on('click', '.datepicker', function (event) {
        event.stopPropagation();
    })
 });

CSS

    .datepicker{
    background: #fff;
    width: 25%;
    float: right;
    display: block;
    cursor: pointer;
    padding: 0.5rem 0.5rem 0.6rem 0.5rem;
}

.ui-datepicker-trigger { 
    position:relative;
    float: right;
    top:13px; 
    right:-170px ; 
    height:20px 
}

input:nth-of-type(2n){
    background: #f7f7f7;
}

любая помощь будет благодарна.

Answer 1

Ваша HTML структура отличается от того, что вы думаете:

Вместо

input:nth-of-type(2n){
    background: #f7f7f7;
}

try

li:nth-child(2n) input{
    background: red;
}