首页 > 代码库 > 单选 复选按钮 样式
单选 复选按钮 样式
<!doctype html><html><head><meta charset="utf-8"><title>选择框样式</title><style>label {font-size:12px;cursor:pointer;}label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;}input[type="checkbox"],input[type="radio"] {display:none;}input[type="radio"] + i {border-radius:7px;}input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;}input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;}input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}</style></head><body><label><input type="checkbox"><i>?</i>复选框</label><br><label><input type="checkbox" checked><i>?</i>复选框</label><br><label><input type="checkbox" disabled><i>?</i>复选框禁用</label><br><label><input type="checkbox" disabled checked><i>?</i>复选框禁用已选</label><br><label><input type="radio" name="abc"><i>?</i>单选框</label><br><label><input type="radio" name="abc" checked><i>?</i>单选框</label><br><label><input type="radio" name="abc" disabled><i>?</i>单选框禁用</label><br><label><input type="radio" name="def" disabled checked><i>?</i>单选框禁用已选</label><br></body></html>
非原创
单选 复选按钮 样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。