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 に変更すると、期待どおりに動作するようです。span タグが適切に閉じられていないことに注意してください (</span> の代わりに </a> があります)。

于 2012-07-10T03:36:01.717 に答える