[HTML教程]完美修改input file类型样式

元素模板为大家介绍完美修改input file类型样式的方法，不多说，直接把代码放在下面把

<style>

.file-input{

line-height:30px;

position:relative;

margin-top:10px;

}

.file-input .input-container{

width:100px;

height:30px;

text-align:center;

background:#3879d9;

color:#fff;

border-radius:3px;

}

.file-input input{

position:absolute;

left:0;

top:0;

opacity:0;

}

.file-input #name{

position:absolute;

left:100px;

top:0;

font-size:12px;

color:#666;

}

</style>

HTML代码

<input type="file" id="default" accept="image/*" multiple>

<div class="file-input">

<p class="input-container">

上传图片

<input type="file" id="upload" accept="image/*" multiple>

</p>

<span id="name"></span>

</div>

有需要判断可以加入JS代码

var upload=document.getElementById('upload');

var nameContainer=document.getElementById('name');

upload.onchange=function(){

var name=[];

for(var i=0;i<this.files.length;i++){

name[i]= this.files[i].name;

if(this.files[i].size>=307200){

alert("文件"+this.files[i].name+"过大，不能超过300kb")

}

}

nameContainer.innerHTML=name;

}

元素模板

[HTML教程]完美修改input file类型 样式

[HTML教程]完美修改input file类型样式