一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用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;
   width: 100%;
   height: %;
opacity: ;
filter: alpha(opacity=);
font-size: 120px;
}

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

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

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

自定义样式 实现文件控件input[type='file']的更多相关文章

  1. html的文件控件<input type="file">样式的改变

    一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...

  2. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

  3. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 使用自定义的按钮替换默认的<input type='file'>

    可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...

  5. 原来样式改变不了(input type="file")

    label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...

  6. jQuery UI 自定义样式的日历控件

    在线演示 本地下载

  7. 兼容IE浏览器样式的html上传文件控件

    最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统 ...

  8. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  9. <input type="file">如何实现自定义样式

    利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...

随机推荐

  1. LeetCode: Ransom Note

    public class Solution { public boolean canConstruct(String ransomNote, String magazine) { int[] rans ...

  2. 箭头函数 Arrow Functions/////////////////////zzz

    箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...

  3. Windows Phone 二十、陀螺仪

    API 示例 // 获取陀螺仪传感器监听对象 Gyrometer gyrometer = Gyrometer.GetDefault(); if (gyrometer == null) { await ...

  4. JSONObject put,accumulate,element的区别

    public Object put (Object key, Object value) 将value映射到key下.如果此JSONObject对象之前存在一个value在这个key下,当前的valu ...

  5. jq 弹半透明遮罩层

    jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s| ...

  6. 通过代码获取res里生成R.java中的值

    引用:http://my.eoe.cn/blue_rain/archive/552.html 有的时候我们生成库文件,需要在里面加入一些UI,并提供出一些xml的资源,那如何在其他项目中使用呢? 我们 ...

  7. 解决jquery mobile的header和footer在点击屏幕的时候消失的办法

    给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"即可,代码如下: <div ...

  8. php常用array函数

    http://www.w3school.com.cn/php/php_ref_array.asp 1.array_change_key_case() 把数组中所有键更改为小写或大写2.array_ch ...

  9. 剑指offer——树的子结构 (JAVA代码)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构). 解题思路: 首先看牛客网给出的测试用例: ...

  10. [已解决][HTML5]基于WebSocket开发小蝌蚪应用

    前端时间在网上看到别人用WebSocket开发的小蝌蚪应用很炫酷,不过是php,于是想着用java也实现一套, 找到前端 https://github.com/danielmahal/Rumpetro ...