首页 > 代码库 > 自定义多选框和单选框css样式
自定义多选框和单选框css样式
直接上代码:
input[type="radio"],input[type="checkbox"]{ -webkit-appearance: none; outline: none; } input[type="radio"]{ position: relative; width: .12rem; height: .12rem; border: 1px solid #186D9A; border-radius: .06rem; -webkit-border-radius: .06rem; -moz-border-radius:.06rem; vertical-align: middle; background: white; } input[type="radio"]:checked:after { content: ‘‘; position: absolute; left: .02rem; top: .02rem; width: .06rem; height: .06rem; background-color: #186D9A; border-radius: .03rem; -webkit-border-radius: .03rem; -moz-border-radius:.03rem; } input[type="radio"]:checked { background-color: #fff; } input[type="checkbox"] { position: relative; width: .12rem; height: .12rem; border: .01rem solid #186D9A; border-radius: .02rem; vertical-align: middle; background: white; margin-top: 0; } input[type="checkbox"]:checked:after { content: ‘‘; position: absolute; left: .02rem; top: .02rem; width: .07rem; height: .04rem; border-left: .02rem solid #186D9A; border-bottom: .02rem solid #186D9A; transform: rotate(-45deg); } input[type="checkbox"]:checked { background-color: #fff; }
自定义多选框和单选框css样式
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。