input file用CSS美化不涉及到JS怎么写代码。

Question

让原有的input file样式消失以后，怎么美化
简单一点，谢谢各位大神

Answer 1

参考GPT和自己的思路：

要实现 input file 的 CSS 美化，可以使用伪元素和背景图片来模拟 input file 框和按钮。具体操作如下：

1. 隐藏原有的 input file 样式

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

1. 使用伪元素 :before 或 :after 来为 input file 添加框和按钮，并设置背景图片

input[type="file"] + .upload-btn:before {
    content: "选择文件";
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    background-image: url(upload.png);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

input[type="file"] + .upload-btn:after {
    content: "没有选择文件";
    display: inline-block;
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
}

1. 使用兄弟选择器来将伪元素和 input file 关联起来，使得点击伪元素时触发 input file 的点击事件

input[type="file"] + .upload-btn:before,
input[type="file"] + .upload-btn:after {
    vertical-align: middle;
}

input[type="file"]:focus + .upload-btn:before,
input[type="file"]:focus + .upload-btn:after {
    outline: none;
    border-color: #4d90fe;
}

input[type="file"]:focus + .upload-btn:before {
    border-color: #4d90fe;
}

input[type="file"] + .upload-btn input[type="file"] {
    display: none;
}

input[type="file"] + .upload-btn:before {
    content: "上传文件";
}

input[type="file"] + .upload-btn:after {
    content: "未选择文件";
}

input[type="file"] + .upload-btn input[type="file"]:hover,
input[type="file"] + .upload-btn input[type="file"]:focus {
    cursor: pointer;
}

最终的 HTML 代码如下：

<div class="upload-btn">
    <input type="file" name="file" id="file" />
</div>

其中 upload.png 是自定义的图片，可以替换成自己的图片。