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. Linux桌面“彩”起来:桌面环境及窗口管理器大盘点

    2011-02-22 11:49:50   看到这个标题,很多人一定认为桌面环境和窗口管理器是一回事,但严格来说窗口管理器和桌面环境是有区别的.桌面环境(Desktop Environments)是最 ...

  2. [POST] What Is the Linux fstab File, and How Does It Work?

    If you’re running Linux, then it’s likely that you’ve needed to change some options for your file sy ...

  3. SpringBoot开发项目,引入JPA找不到findOne方法

    写在前面 开发SpringBoot的DAO层之后,去测试的时候,发现findOne()这个方法找不到了,查看了对应的表字段名和实体类的属性都一致 网上有通过降低版本解决的, 方式太牵强. 还有一种方式 ...

  4. 如何在windows server 2008 部署asp.net mvc

    我们做好的asp.net mvc网站,要部署到windows server 2008(IIS7.0)网站,首先要安装好.net framework 4.0,开发工具VS2010,VS2012,VS20 ...

  5. hibernate 注解 boolean问题解决方案

    1.JPA本身是不支持boolean.可以用Hibernater自带的标签.修改如下. @Column(name = "manager_log") @org.hibernate.a ...

  6. logstash向elasticsearch写入数据,如何指定多个数据template

    之前在配置从logstash写数据到elasticsearch时,指定单个数据模板没有问题,但是在配置多个数据模板时候,总是不成功,后来找了很多资料,终于找到解决办法,就是要多加一个配置项: temp ...

  7. 控件View动态设置高度时会卡顿、速度慢的情况解决

    今天碰到这种情况,一直想不通是什么问题,之前一直设置高度的时候也不卡为何今天就这么卡了.做了很多小示例一直是很慢,后来试着把View的上级节点RelativeLayout的替换成了LinearLayo ...

  8. golang学习笔记 --- goroutine

    package main import ( "fmt" "io" "io/ioutil" "net/http" &quo ...

  9. Innodb中自增长值的列

    Innodb中,自增长值的列必须是索引,同时必须是索引的第一个列.如果不是第一个列,数据库会报出异常 mysql> create table t_inc01( -> a int auto_ ...

  10. 一个“蝇量级” C 语言协程库

    协程(coroutine)顾名思义就是“协作的例程”(co-operative routines).跟具有操作系统概念的线程不一样,协程是在用户空间利用程序语言的语法语义就能实现逻辑上类似多任务的编程 ...