自定义input file样式

上传图片<input type="file" name="fn">

修改：

<div class="filebutton"><div>上传图片</div><input type="file" name="fn"></div>

现在我们先来改下包裹文字的div样式：

.filebutton div{font-size: 25px;background: #00ff7f;color: white;padding: 10px 15px;
}

自然，现在点击“上传图片”这块区域是不管用的，现在要做的就是使“选择文件”的响应区域与之重合。
尝试将“选择文件”按钮移入“上传图片”区域：

.filebutton{position: relative;
}
.filebutton input{position: absolute;top: 0;
}

“上传图片”这按钮太长了，理想的状态是使他的宽度随文本长度而变，且我们可以使用padding等属性调整，于是父div里加上display: inline-block：

.filebutton{position: relative;display: inline-block;
}

宽度也调整好了，但总不能使用这个样子的按钮吧，

那就将它透明度设置为'0'隐藏起来(opacity: 0;):

.filebutton input{position: absolute;top: 0;opacity: 0;
}

现在看起来似乎没什么问题了，但实际上这个按钮现在的响应区域有很大问题：

现在增大input中的font-size来增大响应区域：

.filebutton input{position: absolute;top: 0;opacity: 0;font-size: 100px;
}

现在按钮内所有区域都能响应了，但你会发现，按钮外的很大一部分区域也会响应...
注释掉opacity:0来看看现在的真实效果：

.filebutton input{position: absolute;top: 0;/*opacity: 0;*/font-size: 100px;
}

实际上这句文字所在行才是真正的响应区域，也许你已经有对策了，在父div里设置"overflow:hidden"

.filebutton{position: relative;display: inline-block;overflow: hidden;
}

响应区域调整完成。
最后取消掉opacity:0的注释，大功告成！

自定义input file样式相关推荐

怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式
前言文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式. 不同浏览器的file控件表现形式不一样火狐谷歌 IE 不同浏览器 ...
不同浏览器input file样式不一样
2019独角兽企业重金招聘Python工程师标准>>> 在开发项目过程中会碰到不同浏览器input file样式不一样. 经过分析,打算都用IE上面的附件上传样式, 方案如下: 1 ...
html5 input file样式修改,css为input type=file设置自定义样式
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 主要有两点需要做: 将input type=file控件透明将inp ...
html+lt;input+file样式,不同内核的浏览器中文件选择控件的外观也不相同
标准参考根据 W3C HTML4.01 规范中的描述,type 属性为 "file" 的 INPUT 元素在浏览器中将被渲染为一个文件选择控件(file select),这种控件 ...
html修改上传文件名,input(file)样式修改及上传文件名显示
实现思路:javascript a标签包裹input元素设置a标签为上传按钮的样式,相对定位设置input为透明,绝对定位,覆盖到a上面效果:看到的按钮是a的样式,点击时实际是点击input元素 ...
自定义input checkbox样式
input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;ver ...
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
文章目录博客内容介绍 input 全部类型 file 类型属性 accept属性 multiple属性事件监听 css样式更改上传图片文件,获取图片地址 input type file上传文 ...
ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
Input file 上传文件
Input file 上传文件介绍 <input> type 类型为 file 的 input 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascr ...

自定义input file样式

自定义input file样式相关推荐

最新文章

热门文章