定制input[type=radio]和input[type=checkbox]样式

表单中&＃xff0c;经常会使用到单选按钮和复选框&＃xff0c;但是&＃xff0c;input[type&＃61;"radio"] 和 input[type&＃61;"checkbox"] 的默认样式在不同的浏览器或者手机上&＃xff0c;显示的效果总是不统一&＃xff0c;而且难以修改器样式。

input[type&＃61;"radio"] 样式定制

代码&＃xff1a;

男士

女士

css 样式

input[type&＃61;"radio"] {height: 22px;width: 22px;margin-right: 10px;display: none;
}
input[type&＃61;"radio"] &＃43; label::before {content: "\a0"; /*不换行空格*/display: inline-block;vertical-align: middle;font-size: 18px;width: 18px;height: 18px;margin-right: 10px;border-radius: 50%;border: 1px solid #003c66;background: #fff;line-height: 22px;box-sizing: border-box;
}
input[type&＃61;"radio"]:checked &＃43; label::before {background-color: #003c66;background-clip: content-box;padding: 3px;
}


效果如图&＃xff1a;

input[type&＃61;"checkbox"] 样式定制

代码&＃xff1a;

选择


css 样式

input[type&＃61;"checkbox"] {display: none;
}input[type&＃61;"checkbox"]&＃43;label>i {display: inline-block;width: 20px;height: 20px;border: 1px solid #bbb;background: #bbb;margin-right: 10px;vertical-align: middle;
}input[type&＃61;"checkbox"]:checked&＃43;label>i {position: relative;
}input[type&＃61;"checkbox"]:checked&＃43;label>i::before {content: &＃39;&＃39;;position: absolute;width: 12px;height: 18px;color: black;border-bottom: 1px solid green;border-right: 1px solid green;left: 50%;top: 20%;transform-origin: center;transform: translate(-50%, -30%) rotate(40deg);-webkit-transform: translate(-50%, -30%) rotate(40deg);
}

效果如图&＃xff1a;