html:
<a href="javascript:;" class="a-upload">

        <input type="file" name="" id="">点击这里上传文件

</a>

css:

.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;

            text-decoration: none;

            *zoom: 1

        }

        .a-upload  input {

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

            filter: alpha(opacity=0);

            cursor: pointer;

            color: #444;

            background: #eee;

            border-color: #ccc;

            text-decoration: none

        }

        .a-upload:hover {

            color: #ffffff;

            background: #ff6f29;

            border-color: #ff6f29;

            text-decoration: none

        }

效果：        

总结：

input[type="file"]外面套盒子 设置overflow：hidden，input本身设置大小让其占满父盒子，设置opacity：0；

最后样式调整父盒子样式