onsenui에서 선택한 "세그먼트 버튼"의 색상을 변경하는 방법은 무엇입니까?

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

내가 .SEGMENT을 시도, 또는 .button 또는 .SEGMENT 항목. 나는 각각을 시도했다. : active : : 시도했다 .check, background 배경색으로 확인했다. 하지만 그저 텍스트를 다루고 있습니다. 그것은 백그라운드에서 뭔가 있어야합니다!

--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에 대한 자세한 정보