css - Safari 中的 Jquery UI 日期选择器黑色背景部分

Question

我正在使用 Contact Form 7 wordpress 插件并已启用 fallback for HTML5 input types因为 Safari 不支持桌面上的日期输入类型。

contact form 7 附带的 jquery-ui png 图像已损坏，需要我从其他来源替换它们，因为它们无法在 Safari 上正确显示。

解决了 ui-icons 的问题后，日期选择器上仍有一个区域显示为黑色。我检查了代码，但无法确定是什么元素、样式或背景图像导致了下图中的黑色区域。

小部件的代码如下 -

<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>&nbsp;<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">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
            <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
         </tr>
      </tbody>
   </table>
</div>

我已经多次通过 Safari 的检查器进行追踪，只是不知道我需要为此查看什么元素。

Answer 1

OK，简单地尝试添加这个:

.ui-widget-content {
    background: #fdfca5;
}