polymer - 聚合物 2 中具有多种颜色的多个复选框

Question

我有多个复选框，想用多种颜色检查它。为此，我有覆盖paper-checkbox，但所有元素都被覆盖。我的脚本：

<custom-style>
  <style is="custom-style">
    paper-checkbox {
      --paper-checkbox-checked-color: #0F0;
    }
  </style>
</custom-style>

<div class="item-check">
    <paper-checkbox>Item 1</paper-checkbox>
    <paper-checkbox>Item 2</paper-checkbox>
</div>

我想将项目 1 设置为红色，将项目 2 设置为绿色。我应该怎么做？我是聚合物新手。

Answer 1

对于每个其他具有不同颜色的项目，您可以使用：

<custom-style>
  <style is="custom-style">
    paper-checkbox:nth-of-type(2n+1) {
      --paper-checkbox-checked-color: #F00;
    }
    paper-checkbox:nth-of-type(2n+0) {
      --paper-checkbox-checked-color: #0F0;
    }
  </style>
</custom-style>

<div class="item-check">
    <paper-checkbox>Item 1</paper-checkbox>
    <paper-checkbox>Item 2</paper-checkbox>
</div>

如果您想要特定复选框的特定颜色，您可以像往常一样使用类和 ID。