入力要素 [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互換 */
}

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