<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>等等。