Question

我正在使用以下链接Adding a TimePicker to JQuery UI DatePicker

中的TimePicker库

它工作正常，我在下面添加了我的脚本。！

HTML

<asp:TextBox ID="text_date" Width="200px" CssClass="textbox my-date" MaxLength="10" runat="server" ClientIDMode="Static"></asp:TextBox>

JQuery的

$(document).ready(function () {
    $('#text_date').timepicker({
        hourGrid: 0,
        minuteGrid: 0,
        stepHour: 1,
        stepMinute: 5,
        timeFormat: 'HH:mm',
        showSecond: false,
        showMillisec: false,
        showMicrosec: false,
        showTimezone: false,
        controlType: 'select',
        showButtonPanel: false,
    });
});

CSS

.ui-timepicker-div {
    opacity: 1;
    background: rgb(244, 193, 157);
    font-family: 'Berlin Sans FB';
    font-size: 17px;
    width: 100%;
    height: 100%;
    border: 2px solid darkblue;    
}

.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
    background: darkorange;
    color: darkblue;
    border-bottom: solid 1px #555;
}

.ui-timepicker-div dl {
    text-align: left;
    width: 90%;
    margin-left: 3%;
    margin-right:3%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    font-family: 'Berlin Sans FB';
    font-size: 17px;
    background: rgb(244, 152, 152);
    border: 1px solid #9d2323;
}
.ui-timepicker-div dl dt {
    float: left;
    clear:left;
    padding: 0 0 0 5px;
}

.ui-timepicker-div dl dd {
    margin: 0 10px 10px 40%;
}

.ui-timepicker-div td {
    font-size: 90%;
}
.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-div .ui_tpicker_unit_hide{
    display: none;
}

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
    background: none;
    color: inherit;
    border: none;
    outline: none;
    border-bottom: solid 1px #555;
    width: 95%;
    font-family: 'Berlin Sans FB';
    font-size: 17px;
}

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
    border-bottom-color: #aaa;
}

这提供了以下输出，它运行良好，

但问题是我无法识别CSS标记以访问DropDownList中用于选择小时和分钟值的TimePicker。我想为他们添加样式，但我不知道如何访问它们。有人可以帮我弄这个吗？ CSS中提及的TimePicker并未显示访问DropDownList框的详细信息。

Answer 1

看看这是否有效

select.ui-timepicker-select{
   background-image: none:!important;
   background-color: blue;
}
select.ui-timepicker-select option{
   color: red;
   background-color: yellow;
}

在JQuery TimePicker中向DropDownList添加样式

1 个答案: