title: How to change color of chosen "segment button" in onsenui?
body: <p>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?</p>
  
  <p>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?).  </p>
  
  <p>Here's sample html defining a segment <a href="https://onsen.io/v2/api/css.html#segment-category" rel="nofollow noreferrer">from the documentation on the OnsenUI2 website</a>: </p>
  
  <pre><code>&lt;div class="segment" style="width: 280px; margin: 0 auto;"&gt;
    &lt;button class="segment__item"&gt;
      &lt;input type="radio" class="segment__input" name="segment-a" checked&gt;
      &lt;div class="segment__button"&gt;One&lt;/div&gt;
    &lt;/button&gt;
    &lt;button class="segment__item"&gt;
      &lt;input type="radio" class="segment__input" name="segment-a"&gt;
      &lt;div class="segment__button"&gt;Two&lt;/div&gt;
    &lt;/button&gt;
    &lt;button class="segment__item"&gt;
      &lt;input type="radio" class="segment__input" name="segment-a"&gt;
      &lt;div class="segment__button"&gt;Three&lt;/div&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the <a href="https://github.com/OnsenUI/OnsenUI/blob/0b1d98f39d6b75c32473839ee337ac68d0e6fa82/css-components/src/components/segment.css" rel="nofollow noreferrer">OnsenUI2 code on github</a>  I see this: </p>
  
  <pre><code>: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;
  }
  </code></pre>
  
  <p>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!! </p>
  
  <p>And where are the --segment-active-background-color etc. custom props defined? I could not find them in the css files!</p>
  
  <p>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.</p>
  
  <p>Thanks!! </p>