div 내용으로 라디오 버튼의 원 아이콘을 바꾸십시오.

Question

나는 종이 라디오에서 원 버튼을 숨기고 번호가있는 원을 표시하는 맞춤 div로 바꾸고 싶습니다. 나는 코드 아래에 시도하지만, 나는이 코드 Plunker 시도 모든 내용

.numberCircle { 
    border-radius: 50%; 
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */ 

    width: 36px; 
    height: 36px; 
    padding: 8px; 

    background: #fff; 
    border: 2px solid #666; 
    color: #666; 
    text-align: center; 

    font: 32px Arial, sans-serif; 
} 

paper-radio-button{ 
     visibility: hidden; /* hides circle button but also hides content inside radio button tag**/ 
} 

<paper-radio-button checked> 
    <div class="numberCircle">2</div> 
</paper-radio-button> 

숨 깁니다 https://plnkr.co/edit/kzCDugV8O2H5Z0eKMLZS?p=preview

Answer 1

내가 시간 동안 같은 노력했습니다를. 그러나, 그것을 할 어떤 방법을 찾지 못했습니다. 백그라운드와 같은 색을 설정하여 노출 된 믹스 인 (- 페이퍼 라디오 버튼 - 체크되지 않은 컬러와 페이퍼 라디오 버튼 확인 컬러)로 해결할 수 있지만, 선택한 스타일은 다른 색상이됩니다.