css input「type=file」 样式美化(input上传文件样式 )

1. 什么是input「type=file」？

input「type=file」是用来生成一个选择文件的按钮，当用户点击该按钮时就可以选择本地文件上传到服务端。但是 input「type=file」的默认样式非常丑陋，所以我们需要进行一些样式美化，以便让用户更好地使用我们的网站。

2. 如何美化input「type=file」的样式？

2.1 隐藏默认按钮

首先，我们需要隐藏 input「type=file」的默认按钮，就使用以下代码即可：

input[type=file]{
    display: none;
}

这样，我们的默认按钮就会被隐藏，只剩下一个文字提示。

2.2 更改文字提示样式

接下来，我们需要对文字提示进行美化，以便让用户更加明确需要上传的文件类型。首先，需要对框进行一定的样式美化：

.file-upload {
    background-color:#f0f0f0;
    border-radius:30px;
    display:inline-block;
    cursor:pointer;
    font-size:17px;
    padding:11px 20px;
    text-decoration:none;
    margin-top: 10px;
}

这里我们设置了背景颜色、圆角、光标类型、字体大小、内边距、文本修饰和上边距。

接着，我们需要对文字提示进行美化，使用以下代码：

.file-upload:after {
    content:'请选择文件';
    display:block;
    position:absolute;
    top:0;
    left:0;
    padding:16px 14px;
    background-color:#f0f0f0;
    border-radius:30px;
    width:100%;
    height:100%;
    pointer-events: none;
}

这里设置内容、位置、内边距、背景颜色、圆角、宽度、高度和停止 pointer 事件的触发。

2.3 更换按钮样式

最后，我们需要更换按钮的默认样式。这里我们需要使用一个容器来实现，使用以下代码：

.upload-container {
    position: relative;
}
.upload-container input[type=file] {
    font-size: 100px;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}
.upload-container .file-upload {
    position: relative;
    z-index: 1;
}

这里需要在 upload-container 容器中添加 input[type=file] 输入框和我们刚才设置的 .file-upload 样式。由于输入框和文字提示的层级是重叠的，所以需要设置 input[type=file] 的 z-index 等于1。

3. 结语

以上就是关于如何美化 input「type=file」的样式的全部内容。我们可以根据实际情况进行个性化的样式设置。