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

Question

Я хочу спрятать кнопку круга в paper-radio и заменить ее на пользовательский элемент 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-unchecked-color и --paper-radio-button-checked-color), установив цвет, такой же, как фон, но он не будет работать, если выбранный стиль будет другого цвета.