这里我主要针对 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>
好了,大概就这样吧。
来源: http://www.bubuko.com/infodetail-1999030.html