web-dev-qa-db-ja.com

スタイリング<inputtype = "file">

重複の可能性：
入力タイプのスタイル=「ファイル」ボタン

私はスタイリングしようとしていました

<input type="file">

しかし、私はあまり運がありませんでした。テキストボックスを非表示にし、ボタンのみを保持したい。どうすればいいですか？

javascriptcsswebformsinput
11
Moon

CSSの方法（ベースコードが見つかりました ここ ）：

<html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html>
20
user432219

入力タイプのファイルのスタイルを設定する簡単なクロスブラウザーの方法はありません。したがって、javascriptを使用するソリューションも存在します。

クロスブラウザ方式でファイルタイプのスタイルを設定するために使用できるjQueryプラグインは次のとおりです。

ブラウザでは、ファイル入力のスタイルを設定できません。ファイルスタイルプラグインはこの問題を修正します。画像を閲覧ボタンとして使用できます。 cssを使用して、ファイル名フィールドを通常のテキストフィールドとしてスタイル設定することもできます。 JavaScriptとjQueryを使用して記述されています。

ここでデモをチェックできます

人気のajaxian.comにも投稿されているように、これも見ることができます。

Shaun Inmanには、CSSとDOMを使用してファイル入力のスタイルを設定できる素敵な小さなハックがあります。

これらの要素は対処するのが難しいことで有名であり、IEでNiceを再生するボックスを選択したので、修正するために何か他のものが必要です:)

12
Sarfraz

このjQueryプラグインは、ファイル入力のスタイル設定をはるかに簡単にするために作成しました。 CSSと「偽の要素」を使用して、必要な結果を取得します。

http://github.com/jstnjns/jquery-file

お役に立てば幸いです。

4
JSTNJNS
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
3
boz

一部のブラウザでは、ファイル入力を表示して[参照]ボタンを手動でクリックする必要があります。そうしないと、サーバーに何も送信されません。だから私はSaefrazの最初の解決策を提案します：jQuery用のファイルスタイルプラグイン

0
erinus