自定义文件上传按钮
谷歌浏览器下,默认的按钮是这个样子的:
火狐浏览器下是酱紫的:
IE浏览器下是这个样子的:
个人表示真的丑陋,无法接受!
修改
首先
上传文件:
浏览
最后,点睛之笔
input.file{
display: block;
position: absolute;
cursor: pointer;
left: 305px;
opacity: 0; //就是它,设置透明度的,将选择文件透明度变成0后,如图:
top: 7px;
}
等等等等~
之所以要移动到跟浏览处重叠则是为了点击浏览时,可以弹出选择文件框
最后设置js部分,将选中的文件名字放到文本框
//加一个onchange事件
//记得加载input后面,不然根据js的加载顺序,会没有效果
提交按钮
效果如下
.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,但是这样一来没有字体撑开,它会很小很小,
所以在上面制定了宽度和高度
}