input type=file 按钮修改样式

要修改input type=file按钮的样式，可以使用CSS来实现。但是由于input type=file的设计，只有很少的CSS属性可以应用于它。所以，我们需要使用一些技巧才能改变它的外观。以下是一些实现方法：

方法一：使用label元素代替input元素，并使用CSS样式来美化label元素。

HTML代码：

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i>选择文件
</label>
<input id="file-upload" type="file"/>

CSS代码：

.custom-file-upload {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.custom-file-upload:hover {
    background-color: #f5f5f5;
}

.custom-file-upload i {
    margin-right: 5px;
}

方法二：使用伪元素和背景图片来美化input元素。

HTML代码：

<input type="file" class="custom-file-input"/>
<label class="custom-file-label" for="custom-file-input">选择文件</label>

CSS代码：

.custom-file-input {
    position: absolute;
    left: -9999px;
}

.custom-file-label {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    background-image: url('file-upload.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    padding-left: 24px;
}

.custom-file-label:hover {
    background-color: #f5f5f5;
}

其中，file-upload.png是一个上传图标的图片。

以上两种方法都可以实现美化input type=file按钮的效果。您可以根据自己的需求选择其中一种方法进行使用。