Replace paper radio button's circle icon with div content

Question

I want to hide circle button in paper-radio and replace that with a custom div which displays circle with number. I tried below code,but it hides all contents

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

I tried these codes Plunker:https://plnkr.co/edit/kzCDugV8O2H5Z0eKMLZS?p=preview

Answer 1

I've been trying the same for a time. However, did not find any way to do it. You could work around with the exposed mixins (--paper-radio-button-unchecked-color and --paper-radio-button-checked-color) by setting the colour the same as the background, but it would not work if the selected style would be a different colour.