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();