input单选按钮样式修改

1、css

input[type="radio"] + label::before {content: "\a0"; /*不换行空格*/ display: inline-block; vertical-align: middle;width: 1.2vh;height: 1.2vh;margin-right: 0.5vh;border-radius: 50%;border: 1px solid #afbcc8;padding: 1px;}
input[type="radio"]:checked + label::before {background-color: #2289ea;background-clip: content-box;}
input[type="radio"] {position: absolute;clip: rect(0, 0, 0, 0);}

2、html

<div class="radioStock">
    <input type="radio" id="bookmale" name=radio value="账面库存" checked>
    <label for="bookmale" onclick="stockGrowthRate('type2','账面库存')"><span>账面库存</span></label>
</div>
<div class="radioStock" >
    <input type="radio" id="realmale" name="radio" value="实时库存">
    <label for="realmale" onclick="stockGrowthRate('type1','实时库存')"><span>实时库存</span></label>
</div>

3、js 获取当前input单选按钮选中的值

$('input[name="radio"]:checked').val(); 

 

转载于:https://www.cnblogs.com/dxt510/p/11200818.html