自定义样式 实现文件控件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;
width: 100%;
height: %;
opacity: ;
filter: alpha(opacity=);
font-size: 120px;
}
大致工作基本完成,但是这里有在IE8里有一个小问题,这里就是为什么要给file加一个 font-size: 120px 的原因。
这是控件的原生样式,chrome里点击没问题,但是在IE8里,点击范围只有浏览按钮那个区域
设置字体大小后,人为的扩大了按钮的点击范围,所以这时候点击整个DIV范围都可以弹出文件框。
自定义样式 实现文件控件input[type='file']的更多相关文章
- html的文件控件<input type="file">样式的改变
一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 使用自定义的按钮替换默认的<input type='file'>
可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...
- 原来样式改变不了(input type="file")
label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...
- jQuery UI 自定义样式的日历控件
在线演示 本地下载
- 兼容IE浏览器样式的html上传文件控件
最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统 ...
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- <input type="file">如何实现自定义样式
利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...
随机推荐
- LeetCode: Ransom Note
public class Solution { public boolean canConstruct(String ransomNote, String magazine) { int[] rans ...
- 箭头函数 Arrow Functions/////////////////////zzz
箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...
- Windows Phone 二十、陀螺仪
API 示例 // 获取陀螺仪传感器监听对象 Gyrometer gyrometer = Gyrometer.GetDefault(); if (gyrometer == null) { await ...
- JSONObject put,accumulate,element的区别
public Object put (Object key, Object value) 将value映射到key下.如果此JSONObject对象之前存在一个value在这个key下,当前的valu ...
- jq 弹半透明遮罩层
jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s| ...
- 通过代码获取res里生成R.java中的值
引用:http://my.eoe.cn/blue_rain/archive/552.html 有的时候我们生成库文件,需要在里面加入一些UI,并提供出一些xml的资源,那如何在其他项目中使用呢? 我们 ...
- 解决jquery mobile的header和footer在点击屏幕的时候消失的办法
给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"即可,代码如下: <div ...
- php常用array函数
http://www.w3school.com.cn/php/php_ref_array.asp 1.array_change_key_case() 把数组中所有键更改为小写或大写2.array_ch ...
- 剑指offer——树的子结构 (JAVA代码)
版权声明:本文为博主原创文章,未经博主允许不得转载. 题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构). 解题思路: 首先看牛客网给出的测试用例: ...
- [已解决][HTML5]基于WebSocket开发小蝌蚪应用
前端时间在网上看到别人用WebSocket开发的小蝌蚪应用很炫酷,不过是php,于是想着用java也实现一套, 找到前端 https://github.com/danielmahal/Rumpetro ...