How to change color of chosen “segment button” in onsenui?

Question

OnsenUI2 has a segment with segment button elements. Where is the blue color of the currently chosen segment (radio) button decided in the css, and how do I override it?

Looking at the segment__button I find that it's color is transparent. Perhaps besides the particular css, it is relying on variables and css defined elsewhere? (bootstrap?).

Here's sample html defining a segment from the documentation on the OnsenUI2 website :

<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>

In the OnsenUI2 code on github I see this:

: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;
}

I tried .segment, or .button or .segment-item. I tried each with :active and :checked I tried .check and .checked with background background-color. But then it just covers the text. It needs to be something in the background!!

And where are the --segment-active-background-color etc. custom props defined? I could not find them in the css files!

So how do I set the segment element's background? - the background and text color of the segment-item when it's not (checked) active. - the background and text color of the (checked) active segment item - The borders (the "frame") of the segment itself and the segment-item buttons.

Thanks!!

Answer 1

You actually found all the necessary CSS yourself. You just need to modify it:

  .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 .

All the custom props that you mention are just CSS variables. You can make your own theme and use it in your apps. More info in the docs .