html file样式修改,修改 input type=file 的样式

页面Html

选择文件

CSS

.file {

position: relative;

background: rgb(244,255,251);

border: 1px solid #00D6A3;

border-radius: 4px;

padding: 4px 12px;

overflow: hidden;

color: #00D6A3;

text-decoration: none;

text-indent: 0;

line-height: 20px;

margin-left: 20px;

cursor: pointer;

}

.file input {

position: absolute;

font-size: 100px;

right: 0;

top: 0;

opacity: 0;

cursor: pointer;

}

.file:hover {

background: #00D6A3;

border-color: #00D6A3;

color: #ffffff;

text-decoration: none;

cursor: pointer;

}

选中文件获取名字

$(".file").on("change","input[type='file']",function(){

var filePath=$(this).val();

var arr=filePath.split('\\');

var fileName=arr[arr.length-1];

$("#filename").html(fileName);

})