<form> <div> <input id="item1" type="radio" name="item" value="选项一" checked> <label for="item1"></label> <span>选项一</span> </div> <div> <input id="item2" type="radio" name="item" value="选项二"> <label for="item2"></label> <span>选项二</span> </div> </form>
div { position: relative; line-height: 30px; } input[type="radio"] { width: 20px; height: 20px; opacity: 0; } label { position: absolute; left: 5px; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #999; } /*设置选中的input的样式*/ /* + 是兄弟选择器,获取选中后的label元素*/ input:checked+label { background-color: #fe6d32; border: 1px solid #fe6d32; } input:checked+label::after { position: absolute; content: ""; width: 5px; height: 10px; top: 3px; left: 6px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) }
源码链接:http://runjs.cn/code/hmevb9gs
时间: 2024-11-08 00:28:50