不用系统自带的复选框，单选按钮，选择框的样式，该怎么做

Posted 2020-09-06 梁小清

这里我主要针对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>

 

好了，大概就这样吧。