Mano Prathibhan C Mano Prathibhan C - 1 year ago 102
ASP.NET (C#) Question

Adding style to DropDownList within JQuery TimePicker

I am using a

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

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


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


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


.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%;
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;
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
tag to access the
within the
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
mentioned in the
liks doesnt show the details to access the

Answer Source

see if this works or not

   background-image: none:!important;
   background-color: blue;
select.ui-timepicker-select option{
   color: red;
   background-color: yellow;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download