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>
input type= file 如何更改自定义的样式的更多相关文章
- 原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...
- <input type="file">如何实现自定义样式
利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...
- 关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案
在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click() ...
- 自定义样式 实现文件控件input[type='file']
一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...
- 自定义input[type="file"]的样式
input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...
- input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...
- html中,文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- input type='file'文件上传自定义样式
使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...
- input type="file"在各个浏览器下的默认样式,以及修改自定义样式
一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...
随机推荐
- samba config
[global] netbios name = HARDY #设置服务器的netbios名字 server string = my server #对samba服务器的描述 workgroup ...
- xshell连接centos vi编辑器不能使用小键盘
莫名其妙的本人的xshell,在vim编辑脚本的时候,右侧小键盘无法输出数字,输出的都是一些字母,而且还是一个字母占一行,太过艹蛋! 后来就按照正规的操作步骤,又重建了连接,居然发现正常了! 百思一虑 ...
- <转>SQL 左外连接,右外连接,全连接,内连接
本文节选自:https://www.cnblogs.com/youzhangjin/archive/2009/05/22/1486982.html 连接条件可在FROM或WHERE子句中指 ...
- 解决flume运行中的一个异常问题!
今天在本地测试flume的exec 监控文件 分割的问题!!!遇到各种141异常问题! 怀疑是在切割文件的时候超过了监控文本的时间,导致flume异常退出,,,所以增加了keep-alive 时 ...
- webpack window 处理图片和其他静态文件
安装url-loader npm install url-loader --save-dev 配置config文件 { test: /\.(png|jpg)$/, load ...
- 【代码导读】Github 开源项目——wysihtml5 富编辑器(Bootstrap 风格)【一】
如果你经常留迹于各大论坛.博客,肯定对它们的富编辑器稍有印象.纯 Javascript 富编辑器可以说是前台 JS 脚本的巅峰作品.一款完整的编辑器,其复杂的功能,会让你遇到各种头痛的浏览器兼容问题, ...
- JAXBContext处理CDATA
今天做Lucene数据源接口时,遇到一个问题,就是输出xml时将某些数据放在CDATA区输出: 1.依赖的jar包,用maven管理项目的话, <dependency> <group ...
- Markdown 轻量级标记语言
1.Markdown 语言 1.1 Markdown 简介 Markdown 是一种轻量级的标记语言,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷 ...
- MongoDB学习笔记(3)--删除数据库
MongoDB 删除数据库 语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 实例 以下 ...
- Android Studio多Module开发需要注意的问题
多module开发,其中的一个为入口module,其他module为独立的“应用”(library) 1.在原有的项目导入另外个项目的module为主项目的次module,即在A项目中添加一个启动B项 ...