上传文件样式

html

<div class="file">

　　<label for="file">文件：</label>

　　<div class="userdefined-file">

　　　　<input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件">

　　　　<button type="button">上传</button>

　　</div>

　　<input type="file" name="file" id="file">

</div>

 

css

 

.file {

　　position: relative;

　　height: 40px;

　　line-height: 40px;

}

.file label {

　　display: inline-block;

}

.userdefined-file {

　　position: absolute;

　　top: 0;

　　left: 60px;

　　z-index: 2;

　　width: 300px;

　　height: 40px;

　　line-height: 40px;

　　font-size: 0; /*应对子元素为 inline-block 引起的外边距*/

}

.userdefined-file input[type="text"] {

　　display: inline-block;

　　vertical-align: middle;

　　padding-right: 14px;

　　padding-left: 14px;

　　width: 220px;

　　box-sizing: border-box;

　　border: 1px solid #ccc;

　　height: 40px;

　　line-height: 40px;

　　font-size: 14px;

　　overflow: hidden;

　　text-overflow: ellipsis;

　　white-space: nowrap;

}

.userdefined-file button {

　　display: inline-block;

　　vertical-align: middle;

　　width: 80px;

　　text-align: center;

　　height: 40px;

　　line-height: 40px;

　　font-size: 14px;

　　background-color: #f54;

　　border: none;

　　color: #fff;

　　cursor: pointer;

}

.file input[type="file"] {

　　position: absolute;

　　top: 0;

　　left: 60px;

　　z-index: 3;

　　opacity: 0;

　　width: 300px;

　　height: 40px;

　　line-height: 40px;

　　cursor: pointer;

}

js　

document.getElementById("file").onchange = function() {
　　document.getElementById("userdefinedFile").value = document.getElementById("file").value;
}

转载于:https://www.cnblogs.com/mashixun/p/9202930.html