这里我主要针对pc端而言,移动端由于各个牌子的移动设备都有自己定义的复选框,单选按钮和选择框样式,这里不做讨论。
pc端的默认样式大家都见过,这里直接上效果图
这是我简单做的两个自定义的复选框,单选按钮。以复选框为例,将复选框用一个div包裹起来,然后将复选框的透明度设置为0,下面来看看这个效果的代码
<style>
.checks_icon{border: 1px solid red;border: 1px solid #ccc;padding: 0;height: 12px;
width: 12px;position: relative;-webkit-border-radius: 1px;-moz-border-radius: 1px;
border-radius: 1px;display: inline-block;margin-top: 3px;vertical-align: top;
margin-right: 5px;
}
.checks_icon input{margin: 0;vertical-align:top;filter:alpha(opacity=0);
-moz-opacity:0;-khtml-opacity: 0; opacity: 0;
}
.checks_true{
background: url(img/icon_select.png) no-repeat center center;
background-size: 9px 6px;
}
.radios_icon{border: 1px solid #ccc;padding: 0;height: 12px;width: 12px;position: relative;
-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
display: inline-block;margin-top: 3px;vertical-align: top;margin-right: 5px;
}
.radios_icon input{margin: 0;filter:alpha(opacity=0); -moz-opacity:0;-khtml-opacity: 0;
opacity: 0;vertical-align:top;
}
.radios_true::after{content: "";width: 6px;height: 6px;background-color: #D82028;
position: absolute;-webkit-border-radius: 50%;-moz-border-radius: 50%;
border-radius: 50%;;left: 3px;top: 3px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$(".checks_icon").each(function(){
if($(this).children("input").attr("checked") ){
$(this).addClass("checks_true")
}
})
$(".checks_icon input").on("change",function(){
$(this).parent().toggleClass("checks_true");
})
$(".radios_icon").each(function(){
if($(this).children("input").attr("checked") ){
$(this).addClass("radios_true")
}else{
$(this).removeClass("radios_true")
}
})
$(".radios_icon input").on("change",function(){
$(this).parent().addClass("radios_true");
$(this).parent().siblings(".radios_icon").removeClass("radios_true")
})
})
</script>
<div class="checks_icon ">
<input type="checkbox" name="" id="" value="" checked/>
</div>
我是选择一
<div class="checks_icon">
<input type="checkbox" name="" id="" value="" />
</div>
我是选择一
<br /><br /><br />
<div class="radios_icon radios_true">
<input type="radio" name="cc" id="" value="" checked/>
</div>
我
<div class="radios_icon">
<input type="radio" name="cc" id="" value="" />
</div>
ta1
其中复选框的的勾,需要自己找图片,或者用::after也可以做的
另外的选择框同理,然后清除系统自带的样式,添加自己下载下角图标。效果不上了,直接上代码吧
<style>
/*选择框初始化*/
select {
appearance: none;-moz-appearance: none;-webkit-appearance: none;
padding-right: 14px;position: relative;
background: url(../img/dot_down.png) no-repeat right center transparent;
background-color: transparent;
}
select::-ms-expand {display: none;}
.con_selrct{width: 100px;}
</style>
<select name="" class="con_selrct">
<option value="">选项一</option>
<option value="">选项二</option>
</select>
好了,大概就这样吧。