<input_file>美化

作者: 程小E | 来源:发表于2017-02-25 15:20 被阅读37次

主要思路

在<input_file>标签上套a标签，文字写在<input_file>外a标签内，把<input_file>的设置为透明，绝对定位在a标签上，设置font-size:100px;是扩大<input_file>的选择范围，相应的a标签需要设置overflow:hidden;等样式

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{
            display:inline-block; 
            width:100px; 
            height:40px; 
            background:red; 
            position:relative; 
            overflow:hidden;
            text-align: center;
            text-decoration: none;
            line-height: 40px
        }
        a:hover{
            background:green;
        }
        input{
            position:absolute; 
            right:0; 
            top:0; 
            font-size:100px; 
            opacity:0; 
            filter:alpha(opacity=0);
        }
    </style>

</head>
<body>
    <a href="#">
    打开文件
        <input type="file" value="浏览" />
    </a>

</body>
</html>