上傳文件樣式美化

一、點擊輸入框和上傳按鈕都打開任務管理器(兼容IE和火狐)：

HTML：

<div class="row">
    <input type="text" class="fileinput" readonly="readonly" />
    <a href="javascript:void(0)" class="upload">上傳</a>
    <input type="file" class="file" />
</div>

CSS：

.row{
    position: relative;
}
.fileinput{
    background: #FFFFFF;
    border: 1px solid #D7D7D7;
    height: 24px;
    padding: 6px 9px;
    width: 450px;
    color: #666666;
    outline: none;
    float: left;
}
.upload{
    width: 90px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #666A82;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    float: right;
}
.upload:hover{
    background: #76798F;
    text-decoration: none;
}
.file{
    position: absolute;
    left: 0;
    width: 570px;
    top: 0;
    height: 38px;
    font-size/*\**/:570px\9;/*IE*/
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer;
    overflow: hidden;
}

 JS：

$(".file").change(function(){
    $(".fileinput").val($(this).val());
});

 

 

二、上傳按鈕打開任務管理器(兼容IE和火狐)：

HTML：

<a href="javascript:void(0)" class="upload">上傳<input type="file" /></a>

CSS：

.upload{
    width: 90px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #666A82;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    display:inline-block;
    position:relative;
}
.upload:hover{
    background: #76798F;
    text-decoration: none;
}
.upload input{
    position: absolute;
    left: 0;
    right:0;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer;
    overflow: hidden;
}