Recently I was playing a lot with the Office UI Fabric front-end framework and in one situation I needed a checkbox to be indeterminate. Up to Office UI Fabric 2.6.1 there are no CSS rules for an indeterminate checkbox, though. There are only CSS rules for the two states Checked and Unchecked and setting the DOM property indeterminate to true has no effect whatsoever.

In case you come across the same issue, here is the fix. Simply add the following CSS rules to your style sheet:

.ms-ChoiceField-input:indeterminate + .ms-ChoiceField-field:before {
  background-color: #666666;
  border-color: #666666;
  color: #666666;
  border-radius: 50%;
  content: '\00a0';
  display: inline-block;
  position: absolute;
  top: 4px;
  right: 0;
  bottom: 0;
  left: 4px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
}

.ms-ChoiceField-input:indeterminate + .ms-ChoiceField-field:hover:before {
  background-color: #212121;
  color: #212121;
}

.ms-ChoiceField-input[type='checkbox']:indeterminate + .ms-ChoiceField-field:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: 'Office365Icons';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  content: '\e005'; /*instead of \e041 (tick)*/
  background-color: transparent;
  border-radius: 0;
  font-size: 13px;
  top: 3px;
  left: 3px;
}

These rules are the same as the rules for the pseudo property :checked with one small difference in the 3rd rule (look for the comment).

Here are the three different states after adding the CSS rules:

Unchecked:
Checked:
Indeterminate:

If you want to have a different icon for the indeterminate state, you can choose one from here and replace ‘\e005’ with the icon of your choice.