Question

OnsenUI2有一个带有段按钮元素的段。在css中确定当前所选段（无线电）按钮的蓝色在哪里，我该如何覆盖它？

看看segment__button，我发现它的颜色是透明的。也许除了特定的CSS，它依赖于变量和css在别处定义？（自举？）。

以下是定义细分from the documentation on the OnsenUI2 website的示例html：

<div class="segment" style="width: 280px; margin: 0 auto;">
  <button class="segment__item">
    <input type="radio" class="segment__input" name="segment-a" checked>
    <div class="segment__button">One</div>
  </button>
  <button class="segment__item">
    <input type="radio" class="segment__input" name="segment-a">
    <div class="segment__button">Two</div>
  </button>
  <button class="segment__item">
    <input type="radio" class="segment__input" name="segment-a">
    <div class="segment__button">Three</div>
  </button>
</div>

在OnsenUI2 code on github我看到了这个：

:active + .segment__button {
  background-color: var(--segment-active-background-color);
  border: var(--segment-border);
  border-top: var(--segment-border-top);
  border-bottom: var(--segment-border-bottom);
  border-right: 1px solid var(--segment-color);
  font-size: 13px;
  width: 100%;
  transition: none;
}

:checked + .segment__button {
  background-color: var(--segment-color);
  color: var(--segment-active-color);
  transition: none;
}

我尝试过.segment，或.button或.segment-item。我尝试了每个：主动和：检查我尝试.check和.checked背景背景颜色。但它只是涵盖了文本。它需要在后台！

在哪里定义了--segment-active-background-color等自定义道具？我在css文件中找不到它们！

那么如何设置segment元素的背景呢？ - 未激活（选中）的段项目的背景和文本颜色。 - （已选中）活动段项目的背景和文本颜色 - 段本身的边框（“框架”）和段项按钮。

谢谢！

Answer 1

您实际上自己找到了所有必需的CSS。你只需要修改它：

  .segment__button {
    background-color: whitesmoke;
    color: red;
    border-color: silver;
  }

  :active + .segment__button {
    background-color: orange;
    color: white;
    border-color: silver;
  }

  :checked + .segment__button {
    background-color: red;
    border-color: gold;
  }

Codepen here

您提到的所有自定义道具都只是CSS变量。您可以制作自己的主题并在应用中使用它。有关the docs的更多信息。

如何在onsenui中更改所选“段按钮”的颜色？

1 个答案: