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；
最后樣式調整父盒子樣式
