首页好看的 input type="file"

好看的 input type="file"

时间: 2023-08-27 14:09:10 浏览: 124

下面是一个简单的例子，展示了一个具有自定义样式的漂亮的文件上传按钮： ```html <!DOCTYPE html> <html> <head> <title>漂亮的文件上传按钮</title> <style> .file-upload-wrapper { position: relative; overflow: hidden; display: inline-block; } .file-upload-button { border: none; background-color: #4CAF50; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } .file-upload-input { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; } </style> </head> <body> <div class="file-upload-wrapper"> <button class="file-upload-button">选择文件</button> <input class="file-upload-input" type="file"> </div> <script> var fileInput = document.querySelector('.file-upload-input'); var fileButton = document.querySelector('.file-upload-button'); fileButton.addEventListener('click', function() { fileInput.click(); }); fileInput.addEventListener('change', function() { console.log('选择的文件:', fileInput.files[0]); }); </script> </body> </html> ``` 上述代码使用了一些CSS样式来美化文件上传按钮。`.file-upload-wrapper`类用于包装按钮和输入框，`.file-upload-button`类定义了按钮的样式，`.file-upload-input`类用于隐藏实际的文件输入框。这个例子中的文件上传按钮具有绿色背景和白色文本的简洁样式。当点击按钮时，会触发文件选择框的点击事件，然后选择文件后，会触发文件输入框的`change`事件，你可以在事件处理函数中进行相应的操作。你可以根据自己的需求调整样式，使文件上传按钮看起来更加漂亮。

阅读全文