css input file 美化

html代碼

<div class="file-container">
     <input type="file" name="img">
</div>

css 代碼

.file-container {
    position: relative;
    width: 7rem;
    height: 6rem;
    background: url('../common/images/ui/組1.png') center center no-repeat;
    background-size: 100%;
}
.file-container input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    opacity: 0;
}

input 撐滿父容器，透明度設置爲0，就能夠隨意設置父元素樣式了。
效果：