在 datepicker 上更改特定日期的单元格背景颜色的正确方法

Question

我在网上看到了很多答案 How to change the cell color of a jquery datepicker 但由于某种原因，它们不适用于我的示例。

http://plungjan.name/test/datepicker_orange.html

我希望整个单元格内容为橙色，而不仅仅是我们在单元格中的链接后面看到的内容

所以我能看到的

.ui-state-default {
  background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

它控制单元格内的链接，其类名由我设置为“橙色”

<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>

我在这段代码中给出了橙色类：

return [true,"orange","Almost sold out"];

显示

而不是

如果我在firebug中删除上面的ui-state-default的背景图片可以得到什么

更改现在使用 beforeShowDay 更改的单元格的完整单元格颜色的正确方法是什么？

我尝试通过覆盖默认值来帮助解决这种情况：

.ui-state-default {
  background-color: transparent;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

没有区别

Answer 1

如果你把你的类直接放在标签上，你必须把它改成这样：

.ui-state-default {
  background: #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

在 CSS 中，如果您有背景图像和背景颜色，那么浏览器将向您显示该图像，在这种情况下，该图像是您在第一个示例中使用的渐变灰色。

Answer 2

@mplungjan 把 css 改成这样：

td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}