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文件选择框样式的更多相关文章

  1. IE8下服务端获取客户端文件的路径为C:/fakePath问题的解决方案

    上一篇文章上提到,IE8下服务端获取客户端文件的路径时,会变成C:/fakePath问题,于是乎通过文件路径去获得文件大小就失败了. 上网搜了一下,主要原因是IE8因为安全考虑,在上传文件时屏蔽了真实 ...

  2. 在Win7下要通过某个 线程 来调用SavaDialog文件选择框的问题

    如果 在Win7下要通过某个 线程 来调用SavaDialog文件选择框的代码  选择窗口 有时会出不来 需要设置如下:    ThreadthreadOfRec = new Thread(Reciv ...

  3. Java——文件选择框:JFileChooser

    import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import j ...

  4. layui文件上传中如何先判断后再弹出文件选择框

    前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...

  5. input选择框样式修改与自定义

    html自带的选择框样式不好看,并且在ios设备上丑的罚款.所以一般都是自定义样式: 原理:将原来默认的input选择框隐藏,然后控制label的:before与:after,配合矢量图标或者图片来实 ...

  6. 帮助自定义选择框样式的Javascript - DropKick.js

    来源:GBin1.com 在线演示  在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...

  7. HTML学习笔记之中的一个(input文件选择框的封装)

    方式一:直接透明隐藏 .file_button_container,.file_button_container input {background: transparent url(./img/BT ...

  8. js点击某个图标或按钮弹出文件选择框

    <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2. ...

  9. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...

随机推荐

  1. 字节跳动冬令营网络赛 D.The Easiest One(贪心 数位DP)

    题目链接 \(x:\ 11010011\) \(y:\ 10011110\) (下标是从高位往低位,依次是\(1,2,...,n\)) 比如对于这两个数,先找到最高的满足\(x\)是\(0\),\(y ...

  2. Shell脚本笔记(一)一些零碎的基础知识

    一些零碎的基础知识 一.认识Shell脚本 一)相关概念 Shell是一种命令解释器,作用是按次序执行(遇到子脚本,先执行子脚本的命令)用户输入的命令和程序. Shell脚本语言是弱类型语言,与其他脚 ...

  3. JVM笔记(二)JVM基本结构

    JVM基本结构 一.运行时内存区域 java虚拟机所管理的内存将会包括以下几个运行时内存区域. 1.程序计数器 Program Counter Register:可以看作当前线程(线程私有)所执行的字 ...

  4. Cesium Up and Running Error: Cannot find module 'express'

    在node server.js之前需要npm install,如下: npm install -d

  5. NIOH

    目录 NIOH中的双刀与阴阳术的应用 作战准备篇 2周目毕业装备: 加点: 双刀: 核心技能: 还行的技能: 被动技能: 忍术: 阴阳术: 必学: 选学: 守护灵: 隐世茶室 & 铁匠铺 出发 ...

  6. HTML(四)

    html表格 table常用标签 1.table标签:声明一个表格 2.tr标签:定义表格中的一行 3.td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属 ...

  7. Kafka Streams简介: 让流处理变得更简单

    Introducing Kafka Streams: Stream Processing Made Simple 这是Jay Kreps在三月写的一篇文章,用来介绍Kafka Streams.当时Ka ...

  8. keras 的svm做分类

    SVC继承了父类BaseSVC SVC类主要方法: ★__init__() 主要参数: C: float参数 默认值为1.0 错误项的惩罚系数.C越大,即对分错样本的惩罚程度越大,因此在训练样本中准确 ...

  9. oracle to_char函数使用

    Postgres 格式化函数提供一套有效的工具用于把各种数据类型(日期/时间,int,float,numeric)转换成格式化的字符串以及反过来从格式化的字符串转换成原始的数据类型. 注意:所有格式化 ...

  10. linux命令之free篇

    作业二: 1.free命令查看内存 [root@localhost 桌面]# free total used free shared buffers cachedMem: 1003432 899760 ...