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>

input type= file 如何更改自定义的样式的更多相关文章

  1. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  2. <input type="file">如何实现自定义样式

    利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...

  3. 关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案

    在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click() ...

  4. 自定义样式 实现文件控件input[type='file']

    一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...

  5. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

  6. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  7. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  8. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  9. input type="file"在各个浏览器下的默认样式,以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

随机推荐

  1. ceph iscsi (SCST)

    ceph结合iscsi iscsi Target 安装 1.安装SCST tar -jxf scst-3.0.1.tar.bz2 cd scst-3.0.1 make && make ...

  2. k8s实战读书笔记

    一.概述 kubernetes中Service是真实应用的抽象,将用来代理Pod,对外提供固定IP作为访问入口,这样通过访问Service便能访问到相应的Pod,而对访问者来说只需知道Service的 ...

  3. 创建在“system.net/defaultProxy”配置节中指定的Web代理时出错解决办法。

    出现这种问题会有很多原因,大致解决方法 方法1:在CMD下输入netsh winsock reset命令 简单来说netsh winsock reset命令含义是重置 Winsock 目录.如果一台机 ...

  4. Windows 10安装DockerToolBox失败处理方法

    指令运行报错: Windows 10安装DockerToolBox失败处理方法:升级Windows 10. (注意:只有Windows10 专业版才支持升级,Server和企业版无效)

  5. git使一个非仓库型的工程可以推送

    git config receive.denycurrentbranch false

  6. 【转载】Hibernate之hbm.xml集合映射的使用(Set集合映射,list集合映射,Map集合映射)

    https://www.cnblogs.com/biehongli/p/6555994.html

  7. Python 爬虫 数据清洗 去掉 超链接

    有时候我们需要清洗数据,里面有超链接,怎么去掉他们,比如下面的问题 , - January , </p></li><li </p><div " ...

  8. MIUI 们的发展蓝图:“罪恶”秘密背后的金钱和机遇

    (原文来自 AllThingsD)   听起来有点唬人,但是移动变革的确是这个时代最大的一次技术平台升级事件.这场趋势实在太浩大,不断地循环往复,对于创业者(还有像我这样的投资人来说),则意味着令人激 ...

  9. Spring Hibernate JPA 联表查询 复杂查询(转)

    今天刷网,才发现: 1)如果想用hibernate注解,是不是一定会用到jpa的? 是.如果hibernate认为jpa的注解够用,就直接用.否则会弄一个自己的出来作为补充. 2)jpa和hibern ...

  10. 让MySQL在美国标准下运行

    [美国标准下运行的MySQL会有哪方面的调整] 我不得不说,这里有点标题党了:事实上我想说的就是--ansi模式下启动mysqld进行,但是这个ansi我没有找到更好的译文,就给译成了“美国标准”了. ...