0

currently I'm using the following plugin:

gulp-clean-css

This is my layout:

<div class="checkbox">
  <label>
    <input type="checkbox" disabled="disabled" checked="checked">
    <span class="checkbox-material" style="margin-right: 10px">
       <span class="check"></span>
    </span>I'm supposed to be checked and disabled
  </label>
</div>

Then in my CSS:

.checkbox input[type=checkbox]:checked+.checkbox-material .check {
    color: #2196f3; // when the input's disabled is set to false
}


.checkbox input[type=checkbox][disabled]:checked+.checkbox-material .check{
        color:#9E9E9E!important;cursor:not-allowed!important; // When the input is disabled
}

The issue is that when I run the code optimized, (minified) The second selector is not being taken in account. Although it exists on the stylesheet

Any ideas?

DJ22T
  • 1,628
  • 3
  • 34
  • 66
  • 1
    A demo would be useful but this seems to work when there is something in the actual `.check` span - https://jsfiddle.net/7o4qL3th/ – Paulie_D Oct 06 '16 at 14:56
  • @Paulie_D It might be that he is missing a `;` after the `cursor` property value. – Ricky Ruiz Oct 06 '16 at 14:59
  • @Paulie_D Here is a Fiddle with the whole css minified.http://codepen.io/dgoncalves1/pen/QKaQYj – DJ22T Oct 06 '16 at 15:18

0 Answers0