如何在 onsenui 中更改所选 "segment button" 的颜色？

Question

OnsenUI2 有一个包含分段按钮元素的分段。 css 中决定的当前选择的段（单选）按钮的蓝色在哪里？如何覆盖它？

看着 segment__button 我发现它的颜色是透明的。也许除了特定的 css 之外，它还依赖于其他地方定义的变量和 css ？（bootstrap？）。

这是定义段 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。我尝试了 :active 和 :checked 我尝试了 .check 和 .checked 背景颜色。但它只是覆盖了文本。它需要在后台有东西！！

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

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

谢谢！！

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 中更改所选 "segment button" 的颜色？

How to change color of chosen "segment button" in onsenui?

css

background

background-color

onsen-ui2