思路：

美化思路是，先把之前的按鈕透明度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样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。