不確定時如何更改 AngularJS Material md-checkbox background-image？

Question

當 md-checkbox 在 Chrome 中處於不確定的 state 時，它顯示為破折號。 我希望它改為在所有瀏覽器的復選框內顯示為一個較小的不透明藍色方塊。

我已經想出如何指定 md-checkbox 的背景圖像來繪制正方形：

style="background-image: linear-gradient(white, white 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, white 75%), linear-gradient(to right, white, white 25%, blue 25%, blue 75%, white 75%);"

現在如何使該樣式僅在 md-checkbox 不確定時應用？

Answer 1

我想到了。 我把這個 CSS 放在 my.styles.less 文件中：

  md-checkbox.md-indeterminate .md-icon {
    color: rgba(0,0,0,0);
    background-image: linear-gradient(white, white 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, white 75%), 
      linear-gradient(to right, white, white 25%, rgb(61,163,244) 25%, rgb(61,163,244) 75%, white 75%);
  }