自定义文件上传按钮
谷歌浏览器下,默认的按钮是这个样子的:
火狐浏览器下是酱紫的:
IE浏览器下是这个样子的:
我的表示真的丑陋,没法接受!
修改
首先
#file{
display: inline-block;
}
input.file{
display: block;
position: absolute;
cursor: pointer;
left: 305px; //left 和top的功能从图中能够看到,它将选择文件的的按钮移动到跟浏览重叠的位置上
top: 7px;
}
a{
display: inline-block;
text-decoration: none;
color: red;
}
p{ //这里的p相似文本框,等一下能够经过js将获取到的文件名字填充到这里来
display: inline-block;
padding: 0;
margin: 0;
width: 205px;
height: 18px;
border: 1px cornflowerblue solid;
vertical-align: text-bottom;
font-size: 12px;
}
最后,点睛之笔
input.file{
display: block;
position: absolute;
cursor: pointer;
left: 305px;
opacity: 0; //就是它,设置透明度的,将选择文件透明度变成0后,如图:
top: 7px;
}
等等等等~
之因此要移动到跟浏览处重叠则是为了点击浏览时,能够弹出选择文件框
最后设置js部分,将选中的文件名字放到文本框
//加一个onchange事件
//记得加载input后面,否则根据js的加载顺序,会没有效果
function changefile(x){
var change = document.getElementById("file");
change.innerText = x;
}
提交按钮
效果以下
.btn{
margin-top: 40px;
margin-left: 100px;
background:url(img/按钮.png) ; //给个按钮上个背景
border: 0px; //将本来的边框的设置为0
border-radius: 12px; //设置四个角的弧度
width: 135px;
height: 49px;
cursor: pointer;//设置鼠标悬浮时,鼠标的样式
font-size: 0; //hahahhahahahahaha,这里是我脑洞大发,把字体设置为0,可是这样一来没有字体撑开,它会很小很小,
因此在上面制定了宽度和高度
}