input type= file 如何更改自定义的样式

input {
@include wh(24px,22px);//sass 宽高
@include pa(0,0);      //绝对定位 top：0；left：0；
opacity: 0;            //透明度；
overflow: hidden;
 }
让input type=file 文件改变宽高，透明绝对定位在 点击按钮或者图标的下边，就可以美化自定义上传的文件了；

 

1、项目碰到上传文件，自定义的文件很大，样式丑陋，如何更改

 

 <ul class="chat-dialog-tools-list clr" >
                    <li @click.stop="toggleEm($event)">
                        <i class="icons em-icon" title="选择表情"></i>
                    </li>
                    <li>
    
                        <i class="icons pic-icon">
                            <!--<input type="file" >-->
                            <input type="file" >
                        </i>
                    </li>
                    <li @click.stop="doCapture()">
                        <i class="icons cut-icon" title="屏幕截图"></i>
                    </li>
    
                    <li>
                        <i class="icons file-icon" title="发送文件">
                            <!--<input type="file"  >-->
                        </i>
                    </li>
                    <li>
                        <i class="icons mail-icon" title="发送邮件">
    
                        </i>
                    </li>
                    <li>
                        <i class="icons news-icon" title="历史消息"></i>
                    </li>
                    <li class="chat-dialog-video">
                        <i class="icons video-icon" title="视频通话"></i>
                    </li>
                    <li class="chat-dialog-voice">
                        <i class="icons voice-icon" title="音频通话"></i>
                    </li>
    
                </ul>