• 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" id="carousel">
                        <li @click.stop="toggleEm($event)">
                            <i class="icons em-icon" title="选择表情"></i>
                        </li>
                        <li>
        
                            <i class="icons pic-icon">
                                <!--<input type="file" id="selectFile" @change="sendFile()"  accept="image/jpeg, image/gif, image/x-ms-bmp, image/x-png">-->
                                <input type="file" id="selectImage" title="发送图片" accept="image/jpeg, image/gif, image/x-ms-bmp, image/x-png">
                            </i>
                        </li>
                        <li @click.stop="doCapture()">
                            <i class="icons cut-icon" title="屏幕截图"></i>
                        </li>
        
                        <li>
                            <i class="icons file-icon" title="发送文件">
                                <!--<input type="file" id="selectFile" >-->
                            </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>




  • 相关阅读:
    有种感觉叫失去才知道珍惜
    Alternativa 3D Series – Tutorial 1 – Getting Started
    ruby中使用MiniMagick处理图片
    RMagick动态生成图片
    Rails Model验证之强大
    Rails验证信息的中文化
    Prawn:Ruby生成PDF更简捷的选择
    ruby gem相关命令使用
    Ruby Gems(1)–简要介绍和ruby on rails安装
    Rails安装
  • 原文地址:https://www.cnblogs.com/sxz2008/p/7090344.html
Copyright © 2020-2023  润新知