光标:指针不在输入类型文件上

时间:2012-11-06 10:31:40

标签: javascript jquery html css

  

可能重复:
  Change cursor type on input type=“file”

这是我的jsfiddle:

http://jsfiddle.net/3zNMK/

此类已有游标但无效:

.file
{
    cursor:pointer;
}

我希望即使在输入类型文件中的文本框上进行悬停,也应该更改为手形图标。但它没有用。

有什么方法可以改变这种行为吗?

3 个答案:

答案 0 :(得分:6)

尝试这样的操作

<强> HTML

<span class="file-wrapper">
  <input type="file" name="photo" id="photo" />
  <span class="button">Choose a File</span>
</span>

CSS

.file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.file-wrapper input {
  cursor: pointer;
  font-size: 100px;
  filter: alpha(opacity=1);
  -moz-opacity: 0.01;
  opacity: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}
.file-wrapper .button {
  background: #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  padding: 4px 18px;
  text-transform: uppercase;
}
​

<强> DEMO

答案 1 :(得分:0)

你在小提琴上使用了cursor:hand;,这已经过时了。

如果您使用cursor:pointer;,则在您悬停输入时会出现手形光标。

答案 2 :(得分:0)

cursor:hand被很少的旧浏览器所理解,比如IE6。用户cursor:pointer改为