入力要素 [type="file"] を使用する場合のスタイルのカスタマイズとブラウザの互換性の問題に関する議論

入力要素 [type="file"] を使用する場合のスタイルのカスタマイズとブラウザの互換性の問題に関する議論
この2日間、Baixing.comの筆記試験問題を解いているときに、このような問題に遭遇しました。HTML5の新機能を使用して、Baixing.comの既存のモジュールを実装しました。しばらくBaixing.comを閲覧した後、最終的に情報を公開するためのフォームモジュールを選択しました。理由は非常に簡単です。HTML5にはフォームの新機能がたくさんあります。これらの新機能も非常に実用的です。結局のところ、登録、ログイン、投稿など、フォームのある場所が多すぎます...(ちょっと話がそれましたね。)


この時点で、元のウェブページのフォームにこの要素が表示されました


私の最初の反応は、はは、それは単なる入力要素で、CSS でスタイルをカスタマイズできる、ということでした。その後、当然のことながら、Baixing.com の特定のスタイルを確認するために「右クリック」-「要素を検査」する準備をしましたが、後でわかりました...


間違って開いたに違いありません... この場合、もちろん自分でやらなければなりません。 1 つ確認できることは、ファイルをアップロードするためのこのフォーム コントロールでは input[type="file"] を使用する必要があるということです。 OK、次のコード行を追加するだけです:

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

<入力タイプ="ファイル" />

Chrome ブラウザで更新します。


これがデフォルトのスタイルであることは間違いありませんが、このデフォルトのスタイルを変更するのは難しいことがわかりました。最も厄介なのは、ブラウザによってデフォルトのスタイルが異なることです。インターネット上の画像からそれが非常に明らかです。


(だから私は言う、あなたたちブラウザはまったく従順ではなく、お互いにうまくコミュニケーションをとっていない。あなたたちはとても高いところにいるが、フロントエンドの学生は苦しんでいる。)
ただし、解決策はまだ簡単に考えられます。要素を使用して入力をラップし、その要素に他の必要な要素を追加し、スタイルを設定して目的の効果を実現します。入力要素の位置の値を absolute に設定して外側の要素を塗りつぶし、入力を透明にします。
HTML コードは次のとおりです。

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

<div id="入力ファイル">
<span id="text">クリックしてアップロード</span>
<input id="ファイル" type="ファイル" />
</div>

対応する CSS コードは次のとおりです。

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

#入力ファイル{
position: relative; /* 子要素の位置を確認する*/
幅: 120ピクセル;
高さ: 30px;
背景: #eee;
境界線: 1px 実線 #ccc;
テキスト配置: 中央;
カーソル: ポインタ;
}
#文章 {
表示: インラインブロック;
上マージン: 5px;
色: #666;
フォントファミリー: "黑体";
フォントサイズ: 18px;
}
#ファイル {
表示: ブロック;
位置: 絶対;
上: 0;
左: 0;
width: 120px; /* 幅と高さは周囲の要素と一致する必要があります*/
高さ: 30px;
不透明度: 0;
-moz-opacity: 0; /* 古いブラウザと互換性あり */
フィルター: alpha(opacity=0); /* IE互換 */
}

表示効果は以下のようになります。

キモジ……
しかし、ここでもまだバグがあります。このようにボタンを作成すると、マウスをボタンの上に置くとクリックできるはずです。しかし、すべての要素に cursor:pointer; 属性を追加しても、一部の領域はポインターとして表示されます。この問題を解決できる専門家はいますか?

<<:  Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明

>>:  Linux で rsync を使用する方法

推薦する

Linuxでシンボリックリンクを削除(削除)するコマンド

Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...

回転灯効果を実現するWeChatアプレットの例

序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...

Dapr を使用してマイクロサービスをゼロから簡素化する例

目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...

Web プロジェクト開発における 2 つのトークン理由とサンプル コードの分析

目次質問:プロジェクトには 2 つのトークンがあり、1 つは有効期間が 2 時間 (ショート トーク...

Windows 64 ビットに MySQL を再インストールするチュートリアル (Zip バージョン、解凍バージョンの MySQL インストール)

MySQLをアンインストールする1. コントロールパネルで、MySQLのすべてのコンポーネントをア...

CSS3 疑似クラスセレクターの簡単なレビュー

序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...

CSS3はNESゲームコンソールのサンプルコードを実装します

成果を達成する実装コードhtml <input type="radio" ...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...

FlashFXP FTP クライアント ソフトウェア登録クラッキング方法

FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...

vscodeでnpmを使用してbabelをインストールする方法

序文前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを...

Vueが初めて要素を取得できなかったときの解決記録

序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...

jsを使用して中国語からピンインへの変換の完全な手順を実行します

jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...

MySQL マスターライブラリ binlog (master-log) とスレーブライブラリ relay-log 間のコードの詳細な説明

メインライブラリのバイナリログ: # 2420 で #170809 17:16:20 サーバー ID...

Vueシャトルボックスは上下の動きを実現します

この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...