IE8 下更改input[file] file文件选择框样式
1/使用绝对定位,将文件选择框固定,并且隐藏该选择框(文件选择框可调整宽高),设置该文件选择框 z-index 调高 比如 999。
2/使用任意标签,调整为与上面选择框相同宽高,目的为使用该标签样式覆盖选择框,但是实际触发事件依然是在选择框上,
因为z-index级别比该元素高。又因为大小相同,多以点击该标签任何位置都是在点击文件选择框。
从而达到自定义文本选择框样式的目的。
代码如下:
<div class="input-group" style="margin-left: 55%;">
<input type="file" name="resource" id="mediaFile" onchange="sendMediaFile(this)"
style="position:absolute;left: 90px;width: 70px;height: 30px;cursor:pointer;font-size: 0;opacity:0;filter:Alpha(opacity=0);z-index:999;" alt="">
<input type="button" class='btn btn-success btn-sm' th:value="发送资源"
style="position:absolute;left: 90px;width: 70px;height: 30px;cursor:pointer;" alt="任意资源(图片/音频/视频/文档等)"/>
<input type='button' onclick="showhideDic()" class='btn btn-success btn-sm'
style="margin-right: 10px; float: right; width: 70px;" value='发送文字'>
</div>
隐藏的文本选择框:

显示的触发按钮,该项目中该元素为button,可为任意按钮:

IE8 下更改input[file] file文件选择框样式的更多相关文章
- IE8下服务端获取客户端文件的路径为C:/fakePath问题的解决方案
上一篇文章上提到,IE8下服务端获取客户端文件的路径时,会变成C:/fakePath问题,于是乎通过文件路径去获得文件大小就失败了. 上网搜了一下,主要原因是IE8因为安全考虑,在上传文件时屏蔽了真实 ...
- 在Win7下要通过某个 线程 来调用SavaDialog文件选择框的问题
如果 在Win7下要通过某个 线程 来调用SavaDialog文件选择框的代码 选择窗口 有时会出不来 需要设置如下: ThreadthreadOfRec = new Thread(Reciv ...
- Java——文件选择框:JFileChooser
import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import j ...
- layui文件上传中如何先判断后再弹出文件选择框
前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...
- input选择框样式修改与自定义
html自带的选择框样式不好看,并且在ios设备上丑的罚款.所以一般都是自定义样式: 原理:将原来默认的input选择框隐藏,然后控制label的:before与:after,配合矢量图标或者图片来实 ...
- 帮助自定义选择框样式的Javascript - DropKick.js
来源:GBin1.com 在线演示 在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...
- HTML学习笔记之中的一个(input文件选择框的封装)
方式一:直接透明隐藏 .file_button_container,.file_button_container input {background: transparent url(./img/BT ...
- js点击某个图标或按钮弹出文件选择框
<HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2. ...
- css3更改input单选和多选的样式
在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...
随机推荐
- [P1020]导弹拦截 (贪心/DP/二分/单调队列)
一道很经典的题 这道题就是要求一个最长单调不升子序列和一个最长单调上升子序列. 先打了一个n2复杂度的 用DP #include<bits/stdc++.h> using namespac ...
- [P2921][USACO08DEC]在农场万圣节Trick or Treat on the Farm (记忆化搜索/DP?,Tarjan?)
第一看还以为是水题 随便打了一个bfs只有40分…… 然后开始颓废 #include<bits/stdc++.h> #define N 100005 using namespace std ...
- sqli-labs Less-11 and Less-12
这关是post注入的世界,post注入就是表单中填好数据通常会被送到服务器,然后由服务器将其发送到它要去的地方(比如,送到一个服务器网关程序中,然后由这个程序对其进行处理). 不显示东西,那么加引号等 ...
- SDWebImage 加载一些大的图片的时候导致程序崩溃
在 UIImage+MultiFormat这个类里面添加如下压缩方法, +(UIImage *)compressImageWith:(UIImage *)image { float imageWid ...
- python之函数第二篇
一.名称空间与作用域 名称空间分类: 内置名称空间 import this dir(buil-in) 查看全部内置 全局名称空间 局部名称空间 在函数体内等 查询全局和局部 globals()方法可以 ...
- 5、css补充
css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...
- tk.mybatis通用插件updateByPrimaryKeySelective无法自动更新ON UPDATE CURRENT_TIMESTAMP列的解决办法
tk.mybatis是一个很好用的通用插件,把CRUD这些基本的数据操作全都用动态SQL语句自动生成了,mapper和xml里十分清爽,但是昨天发现有一个小坑,记录在此: 有一张表,结构如下(已经简化 ...
- C#轻量级配置文件组件EasyJsonConfig
一.课程介绍 一.本次分享课程<C#轻量级配置文件EasyJsonConfig>适合人群如下: 1.有一定的NET开发基础. 2.喜欢阿笨的干货分享课程的童鞋们. 二.今天我们要如何优雅解 ...
- srs2.0安装问题
原文: https://blog.csdn.net/ddr77/article/details/52511340 编译配置如下 ./configure --disable-all --with-ssl ...
- 【问题与解决】怎么删除TFS云端上的项目
最近使用了Visual Stuidio提供的网络项目管理,感觉跟visual stuido结合起来还是很好用的,新建项目很简单,但是在删除项目的时候就没有那么简单了,直接通过VS的团队管理删除还会报错 ...