jQuery UI Datepicker: don't highlight today when it is also selected

Question

I\'m using the jQuery datepicker to select dates. It works fine, except there is 1 default behavior that I would like to change. When you select a day, the selected day is

Answer 1

Adding an additional CSS file to your page would definitely be the preferred method. It's easily managed and uses CSS the way it was intended to be used!

You would need to place your override CSS in the head tag after any previously loaded base jQuery CSS or any theme CSS files in order to override their values. (You could also increase the specificity of the default tag, referencing a class or ID in your specific instance.)

i.e.

The "your_override_css" file would simply contain:

.ui-state-active, .ui-widget-content .ui-state-active {
  /*any CSS styles you want overriden i.e.*/
  border: 1px solid #999999;
  background-color: #EEEEEE;
}

---

Note from Mike:

I ended up finding out that there is a td around the anchors that represent the days, and the td also has the "today" information... so despite there not being a cross-browser way to select an item that has multiple classes (that I've found), the following will work in this case, in a new file just as PHPexperts.ca describes:

.ui-datepicker-today .ui-state-active {
  border: 1px solid #aaaaaa;
}