polymer - 用 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-unchecked-color 和 --paper-radio-button-checked-color），但如果选择的样式将是不同的颜色。