選択した「セグメントボタン」の色をどのように変更するか？

Question

OnsenUI2には、セグメントボタン要素を持つセグメントがあります。 CSSで現在選択されているセグメント（ラジオ）ボタンの青色はどこですか、どのように上書きしますか？

セグメント_ボタンを見ると、色は透明です。 おそらく、特定のCSSのほかに、それは他の場所で定義された変数とCSSに依存していますか？ （ブートストラップ？）。私はこの参照OnsenUI2 code on githubで

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

：

ここセグメントfrom the documentation on the OnsenUI2 websiteを定義するサンプルHTMLだ

: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は.segment、又は.buttonまたは.segment項目を試みました。私はそれぞれを試しました：アクティブで：チェックしました。チェックし、バックグラウンドの背景色でチェックしました。 しかしそれはテキストだけをカバーします。それはバックグラウンドで何かになる必要があります！

--segment-active-background-colorなどカスタムプロンプトはどこに定義されていますか？私はCSSファイルでそれらを見つけることができませんでした！

セグメント要素の背景を設定するにはどうすればよいですか？ - セグメントアイテムの背景色とテキスト色がアクティブでない場合（チェックされている場合） - （チェックされた）有効なセグメント項目の背景とテキストの色 - セグメント自体の境界線（「フレーム」）とセグメント項目ボタン。

ありがとうございます！

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をご覧ください。