HTML自定义选取按钮（input样式的按钮）

自定义文件上传按钮

---

谷歌浏览器下，默认的按钮是这个样子的：

火狐浏览器下是酱紫的：

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，但是这样一来没有字体撑开，它会很小很小，
			                            所以在上面制定了宽度和高度
			}