美化 file input 框

雨点打透心脏的1/2处 2022-08-10 17:34 210阅读 0赞

# 1. 浏览器端显示  #

![SouthEast][]

# 2. 示例下载（免积分） #

[美化file input.zip][file input.zip]

# 3. 代码 #

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>4</title>
        <script type="text/javascript" src="http://www.927car.com/js/jquery-1.11.1.js"></script>
    <style>
    * { margin: 0; padding: 0; }
    input { border: none 0; }
    
    .fileInputBox { width: 188px; overflow: hidden; position: relative;  margin: 100px auto; }
    .fileInputBox * { float: left; }
    
    .fileBtn { width: 52px; height: 22px; background: url("./images/browse_btn.jpg") no-repeat; font-family: arial; font-size: 12px; color: white; margin-left: 4px; }    
    .fileDir { width: 130px; height: 20px; border: solid 1px #dedede; }
    
    .fileInput { height: 22px; filter:alpha(opacity=00); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; position: absolute; right: 0px; }
    
    /*********** css hack ***********/
    @-moz-document url-prefix() {
        .fileInput {
            left: 136px; 
        }
    }
    @media screen and (-webkit-min-device-pixel-ratio:0)    {
        .fileInput { 
            left: 136px; 
        }
    }
    /*********** css hack ***********/
    
    </style>
    <script>
    jQuery(document).ready(function($) {
        var $fileInput = $(".fileInput");
        var $fileDir = $(".fileDir");
        var $fileBtn = $(".fileBtn");
    
        $fileInput.change(function(event) {
            $fileDir.attr('value', this.value);        
        });
    });
    </script>
    </head>
    <body>
    
        <div class="fileInputBox">
            
            <input class="fileInput" type="file">
    
            <input class="fileDir" type="text">
            <input class="fileBtn" type="button" value="浏览">
    
        </div>
    
    </body>
    </html>

[SouthEast]: /images/20220810/c2419f500590486195af3a17fa5e8779.png
[file input.zip]: http://download.csdn.net/detail/wuqinfei_cs/7724497