相关疑难解决方法(0)

如何设置输入type="file"按钮的样式.

是否可以设置文件类型的输入元素的样式而不必担心浏览器兼容性？在我的情况下,我需要实现一个背景图像和圆形边框(1px),如果可能的话,也应该定制按钮.

使用bootstrap,我创建input-group了一个button和input type='file'.

除了以外它在各处都很好IE9.在IE9上,正在从右侧裁剪浏览按钮.

演示: http ://jsbin.com/alESiBo/6/edit

码:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
</div>

输出:

IE 9.0.8112.16421

Chrome 31.0.1650.63 m

带快照的IE版本:

<label for="input">Label</label><input type="file" id="input"/>

在Firefox 7中,无法通过单击标签来触发打开的文件对话框.

这个问题非常相似,但是用绿色检查它是FF中的一个错误.我正在寻找一种解决方法.

有任何想法吗？

当鼠标悬停时，如何使光标成为输入文件或输入文本上的指针？

我尝试过，但当然行不通，

<input type="file" style="cursor: pointer;"/>

或者我必须使用javascrip（jquery）？

编辑：

抱歉我的错误 - 光标确实变成了一个点

<input type="text" style="cursor: pointer;"/>

但不上

<input type="file" style="cursor: pointer;"/>

您可以在 Firefox 上测试此链接，然后您就会明白我的意思。

仅将buttonoffile更改为指针，但未更改input fieldof file。

编辑2：

这是我的 CSS 'hack'，

<div id="right-col" style="position:relative; width:76px; height:24px; overflow:hidden; border:1px solid #000;">
<input type="file" style="position:absolute; top:0; right:0; z-index:2;opacity:1; cursor:pointer;"/>
</div>