Заменить значок круга радиокнопки с содержимым div

Question

Я хочу скрыть круглую кнопку в бумажном радио и заменить ее с помощью специального div, который отображает круг с номером. Я попытался ниже код, но он скрывает все содержимое

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

Я пробовал эти коды Plunker: https://plnkr.co/edit/kzCDugV8O2H5Z0eKMLZS?p=preview

Answer 1

Я пытался то же самое в течение времени. Однако не нашел способа сделать это. Вы можете обходиться с выставленными миксинами (- бумага-радио-кнопка-непроверенный-цвет и -paper-radio-button-checked-color), установив цвет так же, как и фон, но он не будет работать, если выбранный стиль будет другого цвета.