zoukankan      html  css  js  c++  java
  • 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; 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; 70px;height: 30px;cursor:pointer;" alt="任意资源(图片/音频/视频/文档等)"/>
    	<input type='button' onclick="showhideDic()" class='btn btn-success btn-sm'
    		   style="margin-right: 10px; float: right;  70px;" value='发送文字'>
    </div>
    

      

    隐藏的文本选择框:

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

  • 相关阅读:
    python_捕获异常
    requests二次封装_捕获异常
    python_flask模块
    python_redis模块
    python_requests模块
    使用pstack和gdb调试死锁
    如何编写go代码
    GDB调试命令手册
    core文件相关
    shared_ptr的线程安全性
  • 原文地址:https://www.cnblogs.com/hfultrastrong/p/10167075.html
Copyright © 2011-2022 走看看