type="file" の入力ボックスのスタイル変更の概要

入力タイプ「file」とは何ですか?

これが何なのかは説明する必要はないと思います。誰もが知っていることです。そして、さまざまな携帯電話があるこの時代では、写真を撮って直接アップロードすることもできます。以前よりもずっと楽しいです。

以前は 1 つのファイルしかアップロードできませんでした。現在は、 multiple属性を追加することで複数のファイルをアップロードでき、多くのファイル形式がサポートされています。詳細については、http://www.w3.org/html/ig/zh/wiki/HTML5/number-state#.E6.96.87.E4.BB.B6.E4.B8.8A.E4.BC.A0.E7.8A.B6.E6.80.81 を参照してください。

アップロードボタンのスタイル調整

CSS を扱ったことがある人なら、HTML 要素の中で、フォームコントロール要素のスタイル変更が最も面倒だということを知っています。多くのコントロールのスタイルは、システムテーマによって変わります。変更したい場合、特に IE ブラウザーでは、シミュレートすることしかできません。

アップロードボタンtype="file"については、一度スタイルを変更しました。シミュレーション方式を試した方もいましたが、シミュレーション方式ではいわゆるセキュリティ上の問題が発生する可能性があると言われています。まあ、ページ作成者や画像カッターの私には理解できませんし、理解できたとしても対処方法がわかりません。じゃあシミュレーションしないで…

しかし、シミュレーションを行わない場合、どのようにスタイルを変更できるのでしょうか?

画像配置オーバーレイソリューション

以前私が知っていた方法は、実は誰もが知っている方法で、アップロードボタンtype="file" を透明にして画像の上に重ね合わせるというもので、クリックするだけで画像をアップロードできると感じられ、ネイティブのアップロードボタンを見る必要はありません。

コードをコピー

コードは次のとおりです。

<input type="file" id="upfile" ><span ></span>.up_icon,.up_input {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;z-index: 2}.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;z-index: 1;}

デモをご覧ください: http://jsbin.com/qacijusihivi/1/

このデモでは、実装方法が非常に明確に示されています。アップロードボタンは画像の上に配置されています。画像は、空のラベルの背景画像として使用できます。次に、アップロードボタンの不透明度を0に設定して、ボタンが見えないようにしています。ただし、実際にはボタンは存在します。その後...その後...他には何も起こらず、効果が達成されます...

WebKit 向けソリューション

この Webkit カーネルのソリューションは、Webkit カーネルにのみ有効であるため、実際には少し無理があり、あまり実用的ではありません。 -webkit-プレフィックスを使用した書き込みがサポートされていない場合は効果がありません。そのため、誰もが娯楽としてそれを見るべきです。

コードをコピー

コードは次のとおりです。

<input type="file" id="upfile">input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;border: 0 none;z-index: 2;}

デモをまずご覧ください: http://jsbin.com/wicihihabifi/1/

このデモの HTML 構造は非常にシンプルで、[入力タグが 1 つだけです。以前の方法よりもはるかにシンプルですが、互換性は確実に低くなります。携帯電話でどのように動作するかはわかりません。ほとんどの携帯電話は現在、Webkit ベースのブラウザーを使用しています。忘れて、エンターテイメントとして扱って楽しんでください。

シンプルな HTML 構造変更スタイルは、 ::-webkit-file-upload-button疑似要素に完全に依存しています。これは単なる普通のボタン要素なので、この疑似要素のスタイルに対応する変更を加えるだけです。このボタン要素を Shadow DOM で表示すると、より鮮明に表示されます。

これは Chrome 開発者ツールで表示される DOM ツリーです。一般的に、Shadow DOM の表示を有効にしないと、 type="file"の入力にこれほど多くのコンテンツが含まれていることはわかりません。開く方法は非常に簡単です。開発者ツールの右上隅にある歯車をクリックします。ポップアップレイヤーでこのボックスをチェックするだけです。