input[type=file]的美化

一般的选择框在美化过程中会出现各种问题,样式出错，文字无法更改等...

所有随之而生的便是这样的一种修饰方式：[将type=file的input与另一个按钮通过js绑定，这样便可以通过改变另一个按钮的样式来达到美化的效果了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <style>
           .dif{
                 height:40px;background:#f5f8fa;border:none;border-radius:30px;
                } 
        </style>
</head>
<body>
<input type="file"style="display:none" >
<button class="dif" onclick="F_Open_dialog()">上传文件</button>
</body>
<script type="text/javascript">
    function F_Open_dialog() {
        document.getElementById("btn_file").click();
    }
</script>
</html>

 

 

posted @ 2017-11-04 15:40  higenbana  阅读(477)  评论(0)    收藏  举报