Safari의 Jquery UI 날짜 선택기 검정색 배경 부분

Question

Safari가 데스크톱의 날짜 입력 유형을 지원하지 않기 때문에 Contact Form 7 워드 프레스 플러그인을 사용 중이며 fallback for HTML5 input types을 사용 설정했습니다.

문의 양식 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>&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> 

나는 사파리의 관리자를 통해 여러 번 추적하고 그냥 이것에 대한보고해야 할 어떤 요소 아무 생각이 없다.

Answer 1

확인을 간단하게 추가 노력이 :

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