title: Customize datepicker CSS to cross out disabled dates
body: <p>I have a <code>datepicker</code>, whose CSS I have customized according to my needs. I want to put a cross (X) over the disabled dates.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text" id="txtFromDate" /&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function(){
    $("#txtFromDate").datepicker({
      minDate: new Date()
    });
  });
  </code></pre>
  
  <p><strong>Customized CSS</strong></p>
  
  <pre><code>.ui-datepicker {     
      padding: .2em .2em 0;
      display: none;
      height:210px;
      width:195px;
      font-family:Trebuchet MS;
  }
  .ui-datepicker .ui-datepicker-header {
      position: relative;
      padding: .2em 0;
      font-size:9pt;
      background-color:#BFDBFF;
      font-family:Trebuchet MS;  
  }
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
      position: absolute;
      top: 2px;
      width: 1.8em;
      height: 1.8em;
  }
  .ui-datepicker .ui-datepicker-prev-hover,
  .ui-datepicker .ui-datepicker-next-hover {
      top: 1px;
  }
  .ui-datepicker .ui-datepicker-prev span,
  .ui-datepicker .ui-datepicker-next span {
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -8px;
      top: 50%;
      margin-top: -8px;
  }
  .ui-datepicker .ui-datepicker-title {
      margin: 0 4em;
      line-height: 1.8em;
      text-align: center;
      background-color:#BFDBFF;
  }
  .ui-datepicker .ui-datepicker-title select {
      font-size: 1em;
      margin: 1px 0;
  }
  .ui-datepicker select.ui-datepicker-month,
  .ui-datepicker select.ui-datepicker-year {
      width: 45%;
  }
  .ui-datepicker table {
      width: 100%;
      font-size: 9pt;
      border-collapse: collapse;
      margin: 20px 0 .4em;
      font-family:Trebuchet MS;
  }
  .ui-datepicker th {
      padding: .7em .3em;
      text-align: center;
      font-weight: bold;
      border: 0;
  }
  .ui-datepicker td {
      border: 0;
      padding: 1px;
  }
  .ui-datepicker td span,
  .ui-datepicker td a {
      display: block;
      padding: .2em;
      text-align: right;
      text-decoration: none;
  }
  .ui-datepicker .ui-datepicker-buttonpane {
      background-image: none;
      margin: .7em 0 0 0;
      padding: 0 .2em;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
  }
  .ui-datepicker .ui-datepicker-buttonpane button {
      float: right;
      margin: .5em .2em .4em;
      cursor: pointer;
      padding: .2em .6em .3em .6em;
      width: auto;
      overflow: visible;
  }
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
      float: left;
  }
  </code></pre>
  
  <p><strong>CSS for crossing out dates</strong></p>
  
  <pre><code>.ui-datepicker-calendar&gt;tbody&gt;tr&gt;td.ui-datepicker-unselectable&gt;span.ui-state-default:before{
      bottom: 0;
      content: "X";
      height: 4px;
      left: 7px;
      margin: auto;
      position: relative;
      right: 0;
      top: 0;
      width: 4px;
  }
  </code></pre>
  
  <p>But with this CSS, the dates are not getting crossed out neatly. It looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/1Hgm1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Hgm1.png" alt="DatePicker"></a></p>
  
  <p>I want the 'crosses' to be covering the overall <code>span</code> and not just the date and it should look clean. How to achieve this with CSS only?</p>
  
  <p>Here is a <a href="https://jsfiddle.net/m75jrys6/" rel="nofollow noreferrer">JSFiddle</a> for the same.</p>