1.所達到的效果：

2.思想：

（1）將選擇文件的按鈕與自己寫的按鈕重合；此處關鍵在于fileop的float:left;和left:40px;

（2）將選擇文件的按鈕設置透明化。

<style type="text/css">*{margin:0;padding:0;font-size:14px;}.fileop{width:105px;height:30px;opacity:0;/*透明化 */float:left;z-index:3;position:absolute;left:40px;/*將原來的選擇文件的按鈕設置透明化，在不斷的移動，使之與按鈕重合 */}.xzwjbtn{float:left;border-radius:3px;height:25px;line-height:36px;margin-left:10px;background-color:#3379d8;cursor:pointer;align:center;width:100px;} </style>

?

<div class="selfile" style="margin-top:30px;margin-left:31px;"><input type="file" id="fileop" name="file" multiple="true" class="fileop" /><a id="xzwjbtn" href="javascript:void(0)" class="easyui-linkbutton xzwjbtn">選擇文件</a><input type="text" id="filete" name="filename" class="easyui-validatebox xzwj" style="width:180px;height:25px;margin-left:10px;padding-left:5px;" readonly="true"/></div>

?一定要進行以下操作，才能把選擇的文件填入到后面的輸入框中

<script type="text/javascript">$(document).ready(function(){$("#fileop").change(function(){var selname=$(this).val();var str="fakepath";var hhstr="";if(selname.indexOf(str)>=0){hhstr=selname.substring(12,selname.length);$("#filete").val(hhstr);}else{$("#filete").val(selname);}});});</script>

效果：

　　

轉載于:https://www.cnblogs.com/GumpYan/p/7601751.html

總結

以上是生活随笔為你收集整理的修改选择文件按钮，变成自己设置的样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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