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,可为任意按钮:

  • 相关阅读:
    MOSS的CSS样式说明
    RSS 简介(一)
    母版页详细分析
    导出 WINDOWS\assembly中DLL文件
    文件下载代码
    列表Field属性的巧妙运用(隐藏栏)
    javascript弹出窗口总结
    转[VBA起步]常用的、带解释的 VBA 短句
    如何生成自定义列表
    mysql 连接字符串与SQL不同
  • 原文地址:https://www.cnblogs.com/hfultrastrong/p/10167075.html
Copyright © 2011-2022 走看看