自定义文件上传按钮样式

自定义文件上传按钮样式

<input type="file">的默认样式是这个样子的：

Chrome浏览器：

IE浏览器：

用一个字来概括，那就是“丑”。

  虽然一直都觉得<input type="file">的默认样式不好看，但苦于不知道如何简单方便地自定义其样式，所以只能将就着用，偶然机会学习到了一种简单美化其样式的方法。废话不多说，直接看码。

美化文件上传按钮的方法：

1、label + clip

所需的关键知识点：<label>标签、clip属性

关于<label>标签：
1、<label>标签通过for属性与表单元素绑定在一起，当点击<label>标签中的文本时，会自动触发表单事件
2、绑定是通过<label>标签的for属性与表单元素的id属性实现的。

关于clip属性：
1、用于裁剪绝对定位的元素；
2、裁剪的形状只能是矩形，clip: rect(top, right, bottom, left)；
3、当被裁减的元素有overflow属性时不起作用；

• HTML代码：

<input id="selectFile" type="file" class="clip">
<label for="selectFile" class="button">选择图片</label>

• CSS代码：

.clip{
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.button{
    display: inline-block;
    width: 96px;
    height: 32px;
    padding: 8px 16px;
    margin: 8px;
    text-align: center;
    line-height: 32px;
    color: #ffffff;
    background: #f44336;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 1px;
}

美化后的效果如图：

如果后续学习到了其他好的方法，也会在这更新的。