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

score 0 · Accepted Answer · answered Nov 01 '17 at 02:24

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.

Sorry, I thought I marked this a long time ago. Thanks!! My mistake was that I was trying to modify the values going into the `segment__button`, instead of just modifying the `segment__button` itself. — pashute, Dec 16 '17 at 22:48

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

1 Answers1