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" ); })

结果：

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的CSS美化上传按钮、checkbox和radio样式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。