type=file的inpu美化，自定义上传按钮样式代码

下面是详细讲解"Type=file的input美化，自定义上传按钮样式代码"的完整攻略。

什么是type="file"的input控件？

type="file"的input控件是用于向Web页面的服务器上传文件的控件。它会弹出一个文件对话框，让用户选择需要上传的文件，然后将文件传输给Web服务器。

type="file"的input控件样式问题

通常情况下，type="file"的input控件在不同的浏览器上都有不同的样式，这会影响用户体验，尤其是对于定制化要求较高的网站而言，type="file"的input控件的样式显得更加重要。

利用CSS美化type="file"的input控件

可以通过添加自定义CSS样式来美化type="file"的input控件，下面是一段常用的代码，可以实现自定义上传按钮的样式。

input[type=file]{
    display:none;
}
label.upload-button{
    display: inline-block;
    background: #ccc;
    color: #fff;
    padding:6px 12px;
    cursor:pointer;
    border-radius:5px;
    border:none;
}

label.upload-button:hover{
    background:#aaa;
}

label.file-okay{
    background:#47a447;
}

实例一：基本自定义样式

下面是一段基本自定义样式代码：

<input type="file" id="exampleInputFile">
<label for="exampleInputFile" class="upload-button">选择文件</label>

这段代码会创建一个"选择文件"按钮，当用户点击按钮时，会弹出文件浏览器。可以通过CSS样式控制按钮的样式。

实例二：显示选中文件名的上传按钮

下面是一段显示选中文件名的上传按钮的代码：

<div class="custom-upload-wrapper">
  <input type="file" id="exampleInputFile">
  <label for="exampleInputFile" class="upload-button"><i class="fa fa-upload"></i> 上传文档
    <span class="file-name">未选择文件</span>
  </label>
</div>

这段代码会创建一个上传按钮和一个文件上传框，当用户选择文件时，文件名会显示在上传按钮上。可以通过CSS样式控制按钮和文件上传框的样式。

以上就是"Type=file的input美化，自定义上传按钮样式代码"的完整攻略。