1

我正在使用 iFrame 来模拟<input type="file">. 这是它的作用：

1 - 一个链接显示说"Choose your file"。

2 - 用户单击链接，浏览其本地计算机上的文件。

3 - 当用户选择文件时，它会自动开始上传。

这很好用。但是，我无法控制光标的类型。我将如何强制光标成为指针？

http://jsfiddle.net/4paY6/是以下代码的示例。

<html>
    <head>
        <style>
        .attach-file:hover {
            text-decoration: underline;
            cursor: pointer;
        }
        .attach-file {
            padding-left: 22px;
            background: url("{{ STATIC_URL }}images/new/attach-file.png") no-repeat 0 1px;
            color: #0BA5D9;
            position: relative;
            top: 0;
            left: 0;
        }
        form {
            float: right;
        }
        html, body {
            padding: 0;
            margin: 0;
            border: 0;
        }
        input[type="file"] {
            z-index: 999;
            opacity: 0.0; 
            line-height: 0; 
            position: absolute;
            position: fixed;
            font-size: 500px; 
            top: -100px; 
            left: -200px;

            -moz-appearance: none;
            white-space: nowrap;
            cursor: pointer;
            -moz-binding: none;
        }

        input[type="file"] > input[type="text"] {
          border-color: inherit;
          background-color: inherit;
          color: inherit;
          font-size: inherit;
          height: inherit;
        }

        /* button part of file selector */
        input[type="file"] > input[type="button"] {
            height: inherit;
            font-size: inherit;
        }
        input[type="file"]:hover {
            cursor: default;
        }
        * {
            overflow: hidden;
        }
    </style>
</head>
<body>

    <form method="post" action="." enctype="multipart/form-data" style="position: inline">
        <label style="overflow: hidden; position: relative;">
           <span class="attach-file">Attach File</a>
            <input type="file" name="attachment" />
        </label>
    </form>
</body>

将鼠标悬停在 iFrame 上时，我需要添加或更改什么来模拟 Firefox 中的光标？

4

2 回答 2

1

CSS

input[type="file"]:hover {
        cursor: default;
    }

覆盖其他样式定义。删除它，你会得到指针光标。

于 2012-07-10T03:23:07.453 回答
0

如果您将不透明度设置为 1，您可以看到问题所在 - 输入占用了整个页面。如果将高度更改为 0px，它似乎可以按预期工作。请注意，您的跨度标签未正确关闭（您有 </a> 而不是 </span>）

于 2012-07-10T03:36:01.717 回答