Mano Prathibhan C Mano Prathibhan C - 1 month ago 14
ASP.NET (C#) Question

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.

Answer

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