[解決済み] ファイルアップロードボタンのクロスブラウザカスタムスタイリング [重複]について

質問

私は個人的な好みに合わせてファイルアップロードボタンをスタイル付けしようとしていますが、JSなしでこれを行うための本当に堅実な方法を見つけることができませんでした。私が見つけたのは 2 つの 他の の質問をしましたが、そこでの回答はJavaScriptを含むか、または提案された Quirksmodeのアプローチ .

この Quirksmode のアプローチの主な問題は、ファイルボタンがブラウザで定義された寸法のままであるため、その下に配置されたボタンとして使用されているものに自動的に調整されないということです。私はそれに基づいていくつかのコードを作りましたが、それはファイルボタンが通常取るであろうスペースを取るだけなので、私が望むように親divを埋めることは全くありません。

HTML。

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>

CSSです。

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}

このバイオリン は、この方法がいかに欠陥があるかを示しています。Chromeでは !! をクリックするとファイルダイアログが開きますが、他のすべてのブラウザでも、ファイルボタンはボタンの正しい領域を占めません。

ファイルアップロードボタンをスタイルするために、JavaScriptを使用せず、できればできるだけ少ない「ハッキング」コーディングを使用する、より堅実な方法はありますか（ハッキングは通常、フィドル内のもののような他の問題を一緒にもたらすので）？

どのように解決するのですか?

(驚いたことに) これを推奨している場所が他になかったので、これを投稿しています。

ブラウザで定義された入力寸法に制限されることなく、これを行う本当に簡単な方法があります。単に <label> タグを使用して、隠しファイルアップロードボタンを囲みます。これによって、ファイルアップロードボタンに使用される webkit の組み込みのスタイリングである ^[1] .

ラベルタグは、クリックイベントを子入力に向けるために作られたものです。 ^[2] このタグを使えば、クリックイベントを入力ボタンに誘導するための JavaScript はもう必要ありません。次のようなものを使用することになります。

label.myLabel input[type="file"] {
    position:absolute;
    top: -1000px;
}

/***** Example custom styling *****/
.myLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.myLabel:hover {
    background: #CCC;
}
.myLabel:active {
    background: #CCF;
}
.myLabel :invalid + span {
    color: #A44;
}
.myLabel :valid + span {
    color: #4A4;
}

<label class="myLabel">
    <input type="file" required/>
    <span>My Label</span>
</label>

古いバージョンのInternet Explorerでも動作するように、固定位置で入力を隠しています（エミュレートされたIE8-では拒否されました）。 visibility:hidden または display:none のファイル入力)。エミュレートしたIE7以上でテストしてみましたが、完全に動作しました。

1. を使用することはできません。 <button> の中で <label> タグの中にあるため、残念ながら、ボタンのスタイルを自分で定義する必要があります。私にとっては、これがこの方法の唯一の欠点です。
2. もし for 属性が定義されている場合、その値は入力のトリガーとして、同じ id と同じ for 属性は <label> .