zoukankan      html  css  js  c++  java
  • 自定义样式 实现文件控件input[type='file']

    一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢?

    思路是这样的:

    1.定义一个相对定位的DIV,按照整成步骤实现自己的结构和样式;

    2.在DIV里添加<input type="file" class="my-file">

    3.将file控件绝对定位,宽度和高度全部覆盖掉父元素,并且设置透明度为0.

    实现代码如下:

    .my-file {
        cursor: pointer;
       position: absolute;
       top: 0;
       left: 0;
       100%;
       height:
    100%; opacity: 0; filter: alpha(opacity=0); font-size: 120px; }

    大致工作基本完成,但是这里有在IE8里有一个小问题,这里就是为什么要给file加一个 font-size: 120px 的原因。

    这是控件的原生样式,chrome里点击没问题,但是在IE8里,点击范围只有浏览按钮那个区域

    设置字体大小后,人为的扩大了按钮的点击范围,所以这时候点击整个DIV范围都可以弹出文件框。

  • 相关阅读:
    Swift使用闭包表达式
    css + html 小知识总结
    关于javascript的误区
    什么是cookie
    css技术和实例
    闭包练习
    web 小知识
    javascript------>(此文转发)
    Spring Boot 系列 @ControllerAdvice 拦截异常并统一处理
    JSR-303 数据校验学习
  • 原文地址:https://www.cnblogs.com/huangxi/p/5144671.html
Copyright © 2011-2022 走看看