kendo 树视图的复选框样式问题

Question

普通复选框的样式可以正常工作，但是当在树中单击复选框时，树的组复选框会发生变化。它是一个连字符，我找不到缩小它的方法。我将复选框变小了，现在连字符在复选框中看起来很奇怪。如何使用 scss 设置该元素的样式？

下图为当前结果

我尝试了以下代码，并且 :before 和 :after 部分适用于复选图标和复选框大小。

.k-checkbox {
  font-size: 8px;
}
.k-checkbox-label {
  font-size: 8px;
}
.k-checkbox-label:before {
  width: 16px;
  height: 16px;
  font-size: 8px;
}
.k-checkbox-label:after {
  width: 16px;
  height: 16px;
  font-size: 8px;
}

理想情况下，我希望组复选框图标始终与选中的复选框相同。（如果你先点击它就是）

Answer 1

尝试在 styles.css 的末尾添加此 CSS 规则：

 checkbox:indeterminate+.k-checkbox-label::after {
    width: 8px;
 }

Answer 2

感谢 Ezanker 告诉我在哪里看。仅将宽度设置为 8px 是不够的，但调整 CSS 规则使我能够更改线条。我真的不知道发生了什么，也不知道它为什么有效。

下面的 css 规则给了我想要的样子。

    .k-checkbox:indeterminate+.k-checkbox-label::after {
        width: 8px;
        height: 1.3px;
        top: 8px;
        left: 4px;
    }

由于复选框的宽度为 16px，因此顶部和左侧居中。

kendo 树视图的复选框样式问题

Checkbox styling issue with kendo treeview

kendo-ui

kendo-treeview

angular