改变input的type类型是file的button样式

版权声明：文章资料来源于网络，都是由作者自己总结下来以供参考学习~如涉及版权问题请联系作者！ https://blog.csdn.net/C_hydar/article/details/86251821

<input type="file" name="">

<input>标签的type是file就会有上面选择文件的button，点击button可以选择本地文件进行上传。但是默认的button样式太一般了，就会有人想要改变样式。但是这个button的样式是不能修改的，这时候要改变样式只能加上一个外部标签。

/* CSS */
<style type="text/css">
button {
	background: rgb(7,193,96);
	border: 1px solid rgb(7,193,96);
	border-radius: 15px;
	position: relative;
	overflow: hidden;   /* 超出button的input部分会被切掉 */
		}
input {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;  /* 透明度为零。隐藏input的默认样式，即整个input被隐藏了，但功能还在 */
}
</style>

<!-- html -->
<button type="button">选择文件
	<input type="file" name="">
</button>

 

关键点有以下几个： 

•  加入外部标签，即给<input>标签加一个父元素，利用父元素设置button的样式；
• 而<input>本身的样式用opacity属性隐藏；
• 超出的<input>部分则用overflow砍掉；
• <input>设置绝对定位，使其在父元素的中间重合；
• 外部元素不一定要用<button>标签，可以用其他标签，如<a>、<span>等等。