自定义 input[type=file] 样式

使用 透明 + 定位 的方法实现自定义 input[type=file] 样式。

HTML:
<span class="as-file">
    <input type="button" value="点击选择图片" />
    <input type="file" exts="png|jpg|bmp" class="as-input-file" />
</span>

CSS:
/* 基础样式 */
.as-file{
    position:relative;
    display:inline-block;
    *display:inline;
    *zoom:1;
    cursor:pointer;
    overflow:hidden;
    vertical-align:middle;
}

/* 影响 .ui-input-file 的样式 */
.as-file .as-input-file{
    position:absolute;
    right:0;
    top:0;
    _font-size:100px; /* overwrite*/
    _font-size:12px;
    _zoom:10; /* overwrite */
    height:100%;
    _height:auto;
    opacity:0;
    filter:alpha(opacity=0);
    -ms-filter:"alpha(opacity=0)";
    cursor:pointer;
}

问题及注意事项：

如上实例，通过在 button 上自定义样式实现视觉效果。