【问题标题】:Cursor:pointer not working on input type file [duplicate]光标:指针在输入类型文件上不起作用[重复]
【发布时间】:2012-10-26 07:00:33
【问题描述】:

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

这是我的 jsfiddle:

http://jsfiddle.net/3zNMK/

这个类已经有一个游标但不能工作:

.file
{
    cursor:pointer;
}

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

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

【问题讨论】:

  • @Andy 没有什么不同。
  • @Andy:是的,是的。但这不应该有所作为。在文本框上有 cursor:hand 的主要问题仍然存在。
  • @Jack 在 stackoverflow 上有大量重复项...(请参阅 aziz 的链接)您是否先尝试搜索?
  • 试试 ::-webkit-file-upload-button { cursor:pointer; }

标签: javascript jquery html css


【解决方案1】:

试试这样的操作

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 吗?我找不到任何拒绝或否决 0... 的浏览器
【解决方案2】:

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

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

【讨论】:

  • 对不起,没明白你的意思。什么是过时的?手还是指针?我用过指针。
  • 您在小提琴上使用了hand,但这也没有什么不同。这应该是一条评论。
【解决方案3】:

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

【讨论】:

    猜你喜欢
    • 2010-12-04
    • 2014-12-27
    • 1970-01-01
    • 2011-05-05
    • 1970-01-01
    • 2014-04-14
    • 2011-11-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多