剑道树视图的复选框样式问题答案

【问题标题】：Checkbox styling issue with kendo treeview剑道树视图的复选框样式问题
【发布时间】：2019-04-17 12:41:49
【问题描述】：

普通复选框的样式可以正常工作，但是当在树中单击复选框时，树的组复选框会改变。这是一个连字符，我找不到使它变小的方法。我已经把复选框变小了，现在复选框中的连字符看起来很奇怪。如何使用 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;
}

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

【问题讨论】：

你有堆栈闪电战要分享吗？
@DavideBellone stackblitz.com/edit/angular-heudrq
也许这可以帮助telerik.com/forums/…

标签： angular kendo-ui kendo-treeview

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

感谢 Ezanker 告诉我去哪里看。仅将宽度设置为 8px 是不够的，但调整 CSS 规则使我能够更改线条。我真的不知道发生了什么以及为什么会起作用。

下面的 css 规则给了我想要的外观。

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

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

【讨论】：