title: Hide icon when form field is disabled
body: <p>I have a form in which i have a datepicker that has an icon that shows the calendar when is clicked on the input field.</p>
  
  <p>I have a case where my field is disabled, the calendar is not showing when the form field OR the icon is clicked, but I also want to hide the icon when the div has the "disabled" attribute.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="control-group no-clear" ydatepicker ng-model="data.date"
                   ng-disabled="(data.id &amp;&amp; data.isRecurrent()) || saving"&gt;
                  &lt;label for="date"&gt;Date&lt;/label&gt;
  
                  &lt;div class="controls"&gt;
                      &lt;input type="text" id="date" ng-model="data.date" required/&gt;
                  &lt;/div&gt;
                  &lt;div class="picker" ui-date="Config.dateOptions" ui-date-format="DD, MM d yy" ng-model="data.date"&gt;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.control-group.date {
    height: 44px;
  
   .controls {
      position: relative;
  
    input {
      cursor: pointer;
    }
  
    i {
      color: $color20;
      font-size: 11px;
      display: inline-block;
      @include transform(rotate(180deg));
      background-color: #fff;
      padding: 1px;
      pointer-events: none !important;
  
      position: absolute;
      top: 7px;
      right: 7px;
    }
  
    .icon-x {
      color: $color30;
      pointer-events: inherit !important;
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/c7t5qha0/2/" rel="nofollow noreferrer">What I have now</a></p>
  
  <p>Also, for more info, when inspecting the element in the browser, the "control-group" gets the "date" class and also disabled="disabled". Under the controls div, i also have the disabled tag on the input field, and an i element that contains the icon that i am talking about.</p>
  
  <p>I have tried </p>
  
  <pre><code>.control-group.date:disabled .controls i {
     display:none;
  }
  </code></pre>
  
  <p>but it isn't working. Also, if I change the display attribute from my CSS from inline-block to none, the icon isn t displayed even if the field is disabled even if not.</p>
  
  <p>I m expecting that my icon to be not displayed when the field is disabled.</p>