自定义文件上传控件样式

  • 时间:
  • 浏览:3

要何如使它变成下面原先,点击此区域不都还可以 上传文件呢?

chrome:不不都还可以 实现点击弹出文件窗口,而是在有些地方鼠标悬停的前一天是 小手状,有些地方却是箭头。

IE:我觉得 整个区域显示都不 小手状,而是点击会出現竖线光标。而是IE10-IE6里都必须一小每种区域点击的前一天会出現文件窗口,有些地方点击越来越反应。

<div class="inputbg"><input type="file" unselectable="on"></div>

<div class="inputbg"><input type="file"></div>

看起来正常,而是功能上确有大间题。

在Chrome中是原先:

在IE里是原先:

你这名前一天会发现,前一天将font-size的值设置的足够大,就能除理你这名大间题。而是会影响Chrome里的功能。也必须否针对IE10-IE6专门设置。在css加上属性font-size: 30px\9;。现在css代码变为

大间题3:除理IE10-IE6里必须一小每种区域点击的前一天会出現文件窗口,有些地方点击越来越反应的大间题。

到现在为止所有浏览器都显示正常了。附上完整性代码:

原理:将input装入去另三个 具有背景的div标签中,而是使input透明。

你这名前一天浏览器里显示是原先的。

大间题1:加上IE浏览器里的竖线光标。

css代码:

作为另三个 刚入坑不久的进程小白,今天和另三个 自定义<input type="file">控件的工作斗智斗勇了一上午。通过各种膜拜大神们的资料,总算最后有了另三个 还算看的过去的除理方案,来记录一下。

在html代码里给input加上属性unselectable="on"。此时,html代码变为:

<div class="inputbg"><input type="file" unselectable="on"></div>

PS:前一天看而是网上的有些资料发现,有的大神在定位的前一天,用的是right: 0;还没理解是哪几个意思~而是还请亲们多多指教~

加上font-size: 0;此时css代码变为:

html代码:

大间题2:除理Chrome浏览器里每种区域鼠标悬停是箭头的大间题。

页面中,<input type="file">控件的默认显示

html代码:

css代码: