jquery UI datepicker transparent background

Question

This seems to be a common question but I've tried many answers but none of them have worked for me.

I'm using jquery UI datepicker. Something seems to be wrong. This is how I see it.

I've included the below in my file

• jquery-1.11.2.min.js
• jquery-ui.min.js (version 1.11.4)
• jquery-ui.min.css (version 1.11.4)

Also I've tried the below css but did not work.

.ui-datepicker {
  background: #fff !important;
  z-index: 10000;
}

How do I make it look normal?

Answer 1

I set up a fiddle with the basic datepicker theme and a colored background (or transparent if you so wish): http://jsfiddle.net/uscmr3xo/3/

.ui-datepicker {
    /*background: transparent;*/
    background: blue;
}

It turned out "background" does the magic while "background-color" doesn't. For some reasons theres no transparent BG in the jquery-ui ThemeRoller (http://jqueryui.com/themeroller/). But if you want to use different color/styling schema please use the tool. Be careful customizing CSS to overwrite the default jquery-ui styles.