JQuery UI DatePicker: override today css

cssdatepickerjqueryoverridinguser-interface

I am using beforeShowDay to highlight special days in my jQuery datepicker. The only way I am able to change the background is to use the '!important' tag in my css class. This works perfectly for all days except 'today'. The css does not change the background color, only the border.

my css:

.genEvent a
{
border:solid 1px #DC143C !important;
background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}

Best Solution

You could try qualifying the selector further.

For example:

body contentDiv .genEvent a
{
    border:solid 1px #DC143C !important;
    background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}

If that works you may be able to remove the other !important, which is worth avoiding as it's a bit of an antipattern.