web-dev-qa-db-ja.com

入力type = "file"のカーソルタイプを変更する

簡単な質問...ファイル入力タイプのカーソルタイプを変更するにはどうすればよいですか？

私は次を試しました：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            input[type="file"] {
              cursor: pointer;
            }
        </style>
    </head>
    <body>
        <input type="file">
    </body>
</html>

何らかの理由で、ボールをプレーしません。

htmlcssinput
73
Tisch

ブラウザによって動作が異なります。ファイル入力タイプが非常に特殊だからだと思います。

どのブラウザ/バージョンを使用していますか？

IE6は、スタイルでタイプを指定することをサポートしていないことを知っています。

さまざまなブラウザーでの動作方法

IE7 +

完全に動作します。

FireFox

問題は修正されたため、完全に機能するようになりました。この問題については bug report をご覧ください。
バージョン3.5では、まったく機能しませんでした。

ChromeとSafari （同一の動作）

ボタンの上に矢印を使用しますが、残りの上に定義されたカーソルを使用します。

Opera

完全に動作します。

この問題を回避するさまざまな手法を使用したいくつかの回避策があることに注意してください。 BjarkeCKによる回答 は、私が気に入っているエレガントなソリューションの1つであり、すべての主要なブラウザーで機能します。

40
awe

cursor:pointerは、デフォルトのボタンが原因で入力ファイルに対して機能しません。ここには特別な理由はありません。このコードを使用して外観を削除する必要があります。font-size:0。

input[type='file']{
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 0;
    position: absolute;
}
<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />

Chrome、Firefox、IEで完全に動作します。

33
Lewis

これは古いスレッドです。しかし、Googleの結果はこれをもたらします...私はちょうどchrome（フラッシュ、javascript、オーバーフローが隠された余分なDOM操作ではない）の部分的な解決策を見つけました）

  • firefoxはこれを修正しました bug
  • safari（現時点では7）とchromeは同じ動作をしていません
  • safari（7、mac）がまったく機能しない
  • chrome（そして多分opera webkitのとき）は:: webkit-file-upload-button疑似クラスを使用できます

。

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
    cursor: pointer; 
}

問題は、ボタンのカーソルプロパティが一般的に継承されないことです。 （？） が、input [type = file]フィールドの残りの部分を占めます。 chromeボタン以外のポインタを取得する理由

32
Endless

今日、この問題に遭遇しました：

/* Chrome/Safari and web-kit-based browsers 
   (if it doesn't work, try maybe also on the parent/wrapper)
*/
::-webkit-file-upload-button {
    cursor:pointer;
}

/* IE11 (if it doesn't work, try maybe also on the parent/wrapper) */
input[type=file] {
    cursor:pointer;
}

それはうまくいくようです:-)

17
madtyn

Ifカーソルを画像上に置くために強制的に手にしたい場合、ここに

すべてのブラウザで簡単かつどのように機能するか：

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');
});

次に、任意のボタンを押してファイルをアップロードすると、ポインターカーソルがあります。

In Chrome and Operaカーソルはパディングのポインタになり、display:block;、そのため、これらのブラウザではこれを行う必要があります。

<input type="file" id="file1"  name="file1" style="display:block; padding:29px 0 0 0;" />
10
ParPar

以下を作成しました。

<li>file<input id="file_inp" type="file" /></li>

liの場合：

li { /*...*/ position:relative; overflow:hidden; /*...*/ }

入力用：

input#file_inp { 
    /*...*/ 
    position: absolute; 
    width: 400px; 
    left: -200px; 
    top:0; 
    cursor: pointer; 
    /*...*/ 
}

前述のように、カーソルはボタンを除く入力全体で「ポインター」になります。ほとんどのブラウザでは、ボタンは左側または右側にあります。 OK！入力に大きな幅を与え、中央のみを表示します...ボタンは非表示になります。そして、クリック可能なのは入力全体です。

それは私のために働く。

6
oporkov

Ajaxアップローダーを実行しようとしている場合は、FireFoxやChromeなどの互換性のあるブラウザーで別の手法を試してみてください。完全に不可視のファイル入力でクリックイベントをトリガーできます。ファイル入力を非表示にするには、表示プロパティをnoneに設定する以外の方法を使用します。設定{高さ：0;オーバーフロー：親フォームのhidden}がトリックを行います。アップローダーごとに個別のフォームを使用します。

カスタムボタンクリックイベントを非表示のファイル入力にリダイレクトすれば完了です。

この手法を使用するには、GeckoまたはWebKitエンジンのnavigator.userAgentチェックを実行する必要があります。他のエンジンでは、古い透過ファイル入力メソッドを使用する必要があります。

2
Harry

私はそれを作る別のアプローチがあることがわかりました。 Opera New、FF、Chrome and Safari。残念ながら、IE（私の場合は十分です）。

input=file要素を固定サイズのdivと非表示のオーバーフローでラップし、cursor: pointer;を設定するという考え方です。左のパディングを使用してdivの外側にボタンを移動するよりも。

<div class="input-file-wrap">
    <input class="file-input" type="file" />
</div>

およびサンプルスタイル

.input-file-wrap {
    background: red;
    height: 33px;
    width: 240px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.file-input {
    width: 100%;
    height: 100%;
    opacity: 0;
    padding-left: 240px;
    margin-right: -240px;
    cursor: pointer;
}

ここで実際の例を見つけることができます： http://jsfiddle.net/5c5RH/2/

2
pawelkmpt

Chromeでもこの問題が発生していました。私はあらゆる種類のCSSセレクターを設定しようとしましたが、何もうまくいかないようでした。ただし、FORM要素を使用して解決策を見つけました。

  1. input [type = file]要素に名前を付けます。
  2. フォーム要素に名前を付け、input [type = file]を入力します。
  3. スパンを作成し、フォーム内の入力の下に配置します。これがラベルになります。
  4. cSSを使用して、入力の高さを0pxに、不透明度を0に設定すると、入力が非表示になります。
  5. スパンを絶対に左0pxに配置します。
<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span">My File label!!!!</span>
</form>

<script>
    var span = document.getElementById("span");
    span.onclick = function(event) {
        document.form.file.click(event);
    };
</script>

私はこれをChromeとFFでテストしました、つまり、ではありませんが、これが役立つことを願っています。jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/

1
alex

まず、コードはInternet Explorerで動作しますが、Firefoxでは動作しません。

第二に、W3C Css標準では、<input />のような複雑なタグのスタイリングが許可されていません。カーソルプロパティでも。

最後に、 このページ を参照してください。私は彼の解決策を試していないので、それが機能するかどうか、どのように機能するかを教えてください。

1
enguerran

使用してみてください：

input[type=file] {
  cursor: pointer; cursor: hand;
}

それが機能するかどうかを確認します。 FF/Chrome /などで動作させるために、ポインターと手を私のものに入れなければなりませんでした。また、それが重要かどうかはわかりませんが、CSSの「ファイル」の周りに引用符があるとは思いません。

0
Jesse O'Brien
            <span class="btn btn-success fileinput-button">
                <span><i class="icon-plus icon-white"></i> Select Image</span>
                <input type="file" name="files[]">
            </span>

css：

.btn {cursor：pointer;}

ここで実際に動作を確認できます： http://blueimp.github.com/jQuery-File-Upload/

それを行うjqueryではありません。 http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css ファイルです。必要なものを取得しただけで、jqueryを使用しなくてもうまく機能します。

0
Christina

私がやった方法：

    /* Upoload */
#upload-profile-file {
    z-index: 1;
}
.uploadButton input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:0;
}
#upload-profile-file:hover ~ #upload-profile-pic-btn
{
    text-decoration:underline;
}

#upload-profile-pic-btn {
    z-index:-1;
}

そして、私のビューページで：

  <form id="upload-profile-pic-form">
                                                <div class="uploadButton">
                                                    <input type="file" id="upload-profile-file" name="upload" style="width: 88px; opacity:0.0; filter:alpha(opacity=0); " onchange='upload()'/>
                                                    <a id="upload-profile-pic-btn" href="#" class="expand">Upload</a>
                                                </div>
                                            </form>

そして、AJAX=を介してサーバーにフォームを送信し、残りをそこで処理します。

だからtl; dr->私は目に見えるリンクのクリックを中継し（すべてのスタイルとベルとホイッスル）、実際にファイル入力をクリックします。 :)

これが誰かを助けることを願っています。

0
Martin

https://stackoverflow.com/a/3030174/2325676 に基づいて-不透明度0を使用して入力を非表示にします。

カーソルを領域全体で機能させるためのキーは、font-sizeをボタンの高さよりも大きい値にして、ファイル入力ボタンが表示領域の下に押し込まれ、マウス入力がファイル入力のテキスト部分にあるようにします。

<div style="display: block; width: 100px; height: 50px; overflow: hidden">
    <button style="width: 110px; height: 50px; position: relative; top: -5px; left: -5px;" ><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" style="height:50px; width: 120px; opacity: 0; filter:alpha(opacity: 0);  font-size: 70px; position: relative; top: -50px; left: -20px; cursor:pointer" />
</div>
0
Daniel Flippance