4

カーソルをホバーしたときに、入力ファイルまたは入力テキストのポインターになるようにするにはどうすればよいですか？

私の試みですが、もちろんうまくいきません、

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

または、javascrip（jquery）を使用する必要がありますか？

編集：

申し訳ありませんが、カーソルが上のポイントに変わります

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

しかし、

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

このリンクをFirefoxでテストすると、私が何を意味するかがわかります。

ポインタへの変更のみ。buttonの変更はありません。fileinput fieldfile

編集2：

これが私のCSS「ハック」です。

<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>
4

6 に答える 6

4

できません。入力型ファイルは、ブラウザーによって最も保護されているオブジェクトの 1 つです。一部のブラウザーでは、「安全」と見なされる内容に応じて、他のブラウザーよりも多くのことを実行できます。

フラッシュボタンを使用できます。実際、Uploadifyなど、ファイルのアップロードをより便利にするために作成された非常に優れたプラグインがあります。

于 2011-08-23T02:05:44.010 に答える
2

この醜いjQueryハックを行うことができます：

$('input:file').each(function(){
    var $input = $(this);
    $input.before($('<div>').height($input.height()).width($input.width()).css(
        {
            cursor: 'pointer',
            position: 'absolute',
            zIndex: $input.css('z-index')
        }).click(function(){
            $(this).hide();
            $input.click();
            $(this).show();
        }));
});

ただし、ボタン要素をマウスダウンしたときに通常表示されるアニメーションが妨げられます。JSFiddle

于 2011-08-23T02:00:25.533 に答える
1

いいえ...それがあなたのやり方です。ここで比較してください。

于 2011-08-23T01:34:02.197 に答える
0

代わりに画像を配置して、次のようにすることができます。

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

警告: IE9 および IE10 では、javascript を介してファイル入力で onclick をトリガーすると、フォームに「危険」のフラグが付けられ、javascript で送信できなくなります。従来の方法で送信できるかどうかはわかりません。

于 2014-01-28T05:16:36.767 に答える