**使用css樣式模擬單選框radio的功能** ### **HTML代碼：** ~~~ <div class="address"> <form> <ul> <li class="top-after"> <label>聯系人</label> <input type="text" /> </li> <li class="top-after"> <input type="radio" name="sex" checked="checked" /> <span class="sex">先生</span> <input type="radio" name="sex" /> <span class="sex">女士</span> </li> <li class="top-after"> <label>手機號</label> <input type="text" /> </li> <li class="top-after"> <label>收貨地址</label> <input type="text" /> </li> </ul> </form> </div> <div class="save"> <input class="save-button" type="button" value="保存"> </div> ~~~ ### **css代碼：** ~~~ body { background: #f0eff5; } .address { width: 100%; margin-top: 10px; background: #fff; } .address li { width: 90%; height: 48px; margin-left: 20px; } .address label { display: inline-block; width: 70px; height: 48px; line-height: 48px; color: #4b4b4b; z-index: 10; } .sex { /*display: inline-block;*/ width: 30px; height: 48px; margin-left: 90px; line-height: 48px; } .address input[type="radio"] { display: inline; border: none; position: absolute; top: 50%; margin-top: -8px; margin-left: 70px; content: ""; width: 16px; height: 16px; background: url(../../img/no.png) no-repeat center / 16px 16px; } .address input[type="radio"]:checked { content: ""; background: url(../../img/yes.png) no-repeat center / 16px 16px; } .address ul li input[type="text"] { width: 70%; height: 48px; z-index: 8; border: none; } /*保存按鈕*/ .save { width: 100%; } .save input[type="button"], .save-button { width: 90%; height: 48px; margin: 30px 5%; font-size: 16px; background: #ffdc44; border: 1px solid #000; border-radius: 10px; } .save input[type="button"]:active { background: #ffdc44; color: #000; } ~~~ ### **出現的bug還有解決方案** #### 我碰到的問題就是在移動端，radio默認的樣式還在，就是默認的框還存在。 解決方案： 在css里面加一句border:none ;取消radio默認的邊框！ ~~~ border: none; ~~~