Safari中的Jquery UI日期选择器黑色背景部分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Safari中的Jquery UI日期选择器黑色背景部分相关的知识，希望对你有一定的参考价值。
我正在使用Contact Form 7 wordpress插件并启用了fallback for HTML5 input types，因为Safari不支持桌面上的日期输入类型。
联系表单7附带的jquery-ui png图像已损坏，要求我将其替换为其他来源，因为它们无法在Safari上正确显示。
在使用ui-icons解决问题之后，我仍然在datepicker上有一个以黑色显示的区域。我已经检查过代码并且没有确定哪个元素，样式或背景图像对下图所示的黑色区域负责。
小部件的代码如下 -
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: fixed; top: 4px; left: 251px; z-index: 2; display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Previous"><span class="ui-icon ui-icon-circle-triangle-w">Previous</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">July</span> <span class="ui-datepicker-year">2018</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th scope="col"><span title="Monday">M</span></th>
<th scope="col"><span title="Tuesday">T</span></th>
<th scope="col"><span title="Wednesday">W</span></th>
<th scope="col"><span title="Thursday">T</span></th>
<th scope="col"><span title="Friday">F</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="Saturday">S</span></th>
<th scope="col" class="ui-datepicker-week-end"><span title="Sunday">S</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">1</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">2</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">3</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">4</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">5</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">6</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">7</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">8</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">9</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">10</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">11</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">12</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">13</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">14</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">15</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">16</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">17</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">18</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">19</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">20</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">21</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">22</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">23</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">24</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">25</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">26</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">27</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">28</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">29</a></td>
</tr>
<tr>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">30</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="6" data-year="2018"><a class="ui-state-default" href="#">31</a></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
我已经多次通过Safari的检查员进行追踪，并且不知道我需要为此寻找什么元素。
答案
好的，只需尝试添加：
.ui-widget-content {
background: #fdfca5;
}
以上是关于Safari中的Jquery UI日期选择器黑色背景部分的主要内容，如果未能解决你的问题，请参考以下文章
使用下一个箭头时，jquery ui 的日期选择器中的月份返回错误值
如何在 jquery ui 日期选择器中同时禁用周末和选定日期？