入力要素 [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 ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

目次Linux ドライバーの共通機能 (copy_from_user open read write...

INS と DEL を使用してドキュメントの変更をマークする方法の詳細な説明

ins と del は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、...

Linux でバックグラウンド タスクを実行するために nohup と screen を使用する例と違いの簡単な分析

SSH ターミナル (putty、xshell など) を使用して Linux サーバーに接続し、時...

MySQLクエリデータを時間別に表示します。データがない場合は0を入力してください。

需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...

WeChatアプレットbindtapとcatchtapの違いの詳細な説明

目次1. イベントとは何ですか? 2. イベントの使い方3. バインドタップとキャッチタップの違い4...

Dockerでパラメータ変数を外部から指定する方法

この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...

MySQL GTID マスターとスレーブの不一致を修復するソリューション

目次解決策1: レプリカを再構築する前提条件アドバンテージ欠点手順マスター奴隷解決策2: データ修復...

MySQLは複数テーブル関連統計(サブクエリ統計)の例を実装します

この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...

Vueパンくずコンポーネントのカプセル化方法

Vueはパンくずコンポーネントをカプセル化して参照します。具体的な内容は次のとおりです。効果を達成す...

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...

Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)

目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...

Linux での MySQL の文字化け問題の解決方法

プロジェクトはサーバーと対話し、post を通じてサーバー側の jsp にアクセスし、jsp はサー...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...

フォーム内のどの隠し属性をフォームとともに送信できるか

フォーム内の visibility=hidden および display=none のフォーム要素は...