type='file'の入力ボックススタイルの操作方法-htmlチュートリアル-php.cn

type='file'の入力ボックススタイルの操作方法

php中世界最好的语言

リリース： 2018-01-26 10:15:10

オリジナル

2536 人が閲覧しました

今回は、type="file"の入力ボックススタイルの操作方法と、type="file"の入力ボックススタイルを操作する際の注意点を紹介します。実際のケースを見てみましょう。

type="file" の入力は何ですか?

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

そして、以前は 1 つのファイルしかアップロードできませんでしたが、現在は multiple 属性を追加することで複数のファイルをアップロードできるようになり、多くのファイル形式がサポートされています。詳しくは、一緒に遊んだ友達をご覧ください。 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;}

ログイン後にコピー

このコードでは、配置方法によってアップロードボタンを画像の上に配置し、画像を空のラベルの背景画像として使用できることが非常に明確になります。アップロードボタンの透明度を 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;}

ログイン後にコピー

このコードの HTML 構造は非常に単純で、[

input タグ

] だけで十分です。ただし、互換性の点では明らかに劣っています。携帯電話で使用するには、端末はどうですか? 現在、ほとんどの携帯端末は Webkit ベースのブラウザです。それは忘れて、エンターテイメントとして扱いましょう~ 単純な HTML 構造の変更スタイルは、次のものに完全に依存しています。 :-webkit-file- アップロードボタン疑似要素の場合、これは単なる通常のボタン要素であるため、この疑似要素のスタイルに対応する変更を加えるだけで済みます。 Shadow DOM を表示してこのボタン要素を表示すると、より明確になります。

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

これで、読者は他の入力タグを自分で確認できるようになり、Shadow DOM がある場合は確実に拡張できます。そして、新しい HTML5 タグの中には、いくつかあります...

最後に

type="file" の input タグについては、現在、スタイルを変更する方法は次の 2 つだけが私が知っている方法と、Webkit の場合の解決策は次のとおりです。これも非常に制限されていますが、携帯電話では問題ありません。他のブラウザではどうすればいいの? という人もいるかもしれません。はい、どうすればいいのかわかりません。

Firefoxブラウザではforms.cssにinput type="file" > button[type="button"]というセレクタがあるのですが、よくわかりませんが自分流にこのセレクタを追加しました, それでも効果が見られなかったのでプレイをやめました。

追記: form.css ファイルについては、Firefox ブラウザーのファンであれば、パス resource://gre-resources/forms.css の存在を知っている必要があります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。