0

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

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

这是从 OnsenUI2 网站上的文档中定义一个片段的示例 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>

在github 上的 OnsenUI2 代码中， 我看到了这个：

: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 文件中找不到它们！

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

谢谢！！

4

1 回答 1

0

实际上，您自己找到了所有必要的 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;
  }

在这里编写代码。

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

于 2017-11-01T02:24:20.753 回答