效果如下:
html代码:
css样式:
.form-inline .checkbox,.form-inline .radio { position: relative; display: inline-block; font-weight: 400; margin-bottom: 4px; margin-right: 10px; padding-left: 2px; line-height: 25px; color: #0c4757; cursor: pointer; font-size: 13px; }.form-inline .checkbox.state-disabled, .form-inline .radio.state-disabled { cursor: default!important; opacity: .6!important;}/*add*/.form-inline .checkbox input,.form-inline .radio input { position: absolute; left: -9999px;}.form-inline .checkbox i,.form-inline .radio i { position: absolute; top: 6px; left: 0; display: block; width: 15px; height: 15px; outline: 0; border-width: 1px; border-style: solid; background: #fff;}.form-inline .radio i { border-radius: 50%;}.form-inline .checkbox i,.form-inline .radio i{ border-color: #acacac; transition: border-color .3s; -webkit-transition: border-color .3s;}.form-inline .checkbox input:checked+i,.form-inline .radio input:checked+i { border-color: #acacac;}.form-inline .checkbox input+i:after, .form-inline .radio input+i:after { position: absolute; opacity: 0; transition: opacity .1s; -webkit-transition: opacity .1s;}.form-inline .radio input+i:after { content: ''; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background-color: #47A8C0;}.form-inline .checkbox input:checked+i:after,.form-inline .radio input:checked+i:after { opacity: 1;}.form-inline .checkbox input+i:after { content: '\f00c'; top: -6px; left: -1px; width: 15px; height: 15px; font-family: FontAwesome; font-size: 15px; color: #47A8C0;}
注意:1、此方法中没用用到任何图片,只用到font awesome字体,对应的编码参考此文:。
2、此效果不兼容IE9+、chrome、FF等高版本浏览器。
所以在head中引用该css时,需要做如下兼容处理:
补充:如果复选框字体想用阿里的iconfont图标,那么在引进iconfont包的基础上,类.form-inline .checkbox input+i:after中的content和font-family都需要进行修改,其中content为图标的unicode编码,但有一点不同,html中可以直接使用,在css中要换算成\e608,形如:
.form-inline .checkbox input+i:after { content: '\e608'; top: -6px; left: -1px; width: 15px; height: 15px; font-family: 'iconfont'; font-size: 15px; color: #47A8C0;}