CSS美化上传按钮 checkbox和radio样式

思路：

美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

input[type=file]上传按钮美化

代码如下：

样式一：

/*a upload */.a-upload {padding: 4px 10px;height: 20px;line-height: 20px;position: relative;cursor: pointer;color: #888;background: #fafafa;border: 1px solid #ddd;border-radius: 4px;overflow: hidden;display: inline-block;*display: inline;*zoom: 1}.a-upload input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer}.a-upload:hover {color: #444;background: #eee;border-color: #ccc;text-decoration: none}

样式二：

.file {position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;}.file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;}.file:hover {background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;}

html:

<a href="javascript:;" class="a-upload"><input type="file" name="" id="">点击这里上传文件</a><a href="javascript:;" class="file">选择文件<input type="file" name="" id=""></a>

结果：

样式一：

样式二：

radio美化

代码如下：

背景图片：

样式：

.pay_list_c1 {width: 24px;height: 18px;float: left;cursor: pointer;text-align: center;margin-right: 10px;background-image: url(images/inputradio.png);background-repeat: no-repeat;background-position: -26px 0;}.radioclass {width:100%;height:100%;opacity: 0;cursor: pointer;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}.on {background-position: 0 0;}

html:

<div class="radioWrap"><span class="pay_list_c1 on"><input type="radio" checked="checked" name="paylist" value="0" class="radioclass"></span><span class="pay_list_c1"><input type="radio" checked="checked" name="paylist" value="1" class="radioclass"></span></div>

JS:

$(".pay_list_c1").click(function(){$(this).addClass("on").siblings().removeClass("on");})

结果：

checkbox美化

代码如下：

背景图片：

样式：

.piaochecked {width: 20px;height: 20px;float: left;cursor: pointer;margin-left: 10px;text-align: center;background-image: url(images/checkbox_01.png);background-repeat: no-repeat;background-position: 0 0;}.on_check {background-position: 0 -21px;}.radioclass {opacity: 0;cursor: pointer;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

html:

<div class="checkWrap"><div class="piaochecked on_check"><input name="need_inv" type="checkbox" style="height:20px;width:20px;" class="radioclass input" value="1"></div><div class="piaochecked"><input name="need_inv" type="checkbox" style="height:20px;width:20px;" class="radioclass input" value="1"></div></div>

JS:

$(".piaochecked").click(function(){$(this).toggleClass( "on_check" );})

结果：