CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net
Mano Prathibhan C
Mano Prathibhan C

Reputation: 518

Adding style to DropDownList within JQuery TimePicker

I am using a TimePicker library from the following link Adding a TimePicker to JQuery UI DatePicker

It's working fine, i have added my scripts below.!

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;
}

This provides the following output, it works well and good,

enter image description here

But the problem is im not able to identify the CSS tag to access the DropDownList within the TimePicker that are used to select the Hour and Minute values. I want to add styles to them but im not sure how to access them. Can someone help me with this? The CSS mentioned in the TimePicker liks doesnt show the details to access the DropDownList boxes.

Upvotes: 0

Views: 1470

Answers (1)

Rahul
Rahul

Reputation: 4364

see if this works or not

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

Upvotes: 1

Related Questions