Question

我正在使用angular-ivh-treeview来呈现分层的复选框列表。它工作正常，但是我无法设置复选框的样式。如果我是正确的话，我必须使用自定义模板，然后将一些:: before / :: after样式应用于标签？

到目前为止，我得到的是here，这是正确的解决方法吗？我不确定如何在自定义模板中动态设置ID，因此目前所有节点都具有相同的ID，只会更改第一个节点的颜色。

模板：

template: [
      '<div class="custom-control custom-checkbox-primaryblue">',
      '<input type="checkbox" class="custom-control-input" id="12">',
      '<label  class="custom-control-label" for="12">',
      '{{::trvw.label(node)}}',
      '</label>',
      '</div>',
    ]

CSS

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;

}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;

}

.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;   
    background-color: yellow;
}

.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
}

.custom-checkbox-primaryblue .custom-control-label {
    outline: none;
    white-space: nowrap;
  position: relative;
    margin-bottom: 0;
    background-color: yellow;
}


.custom-control-input:checked + .custom-control-label::before {
  background-color:blue;
}

使用ivh-treeview自定义复选框样式

0 个答案: