入力要素 [type='file']_HTML/Xhtml_Web ページ作成時のスタイルのカスタマイズとブラウザの互換性の問題についてのディスカッション

過去 2 日間、Baixing.com の筆記試験問題を解いているときに、HTML5 の新機能を使用して Baixing.com の既存のモジュールを実装したときに、このような問題に遭遇しました。情報を公開するために使用するフォーム モジュールを選択しました。その理由は非常に簡単です。HTML5 には、登録、ログインなど、フォームに関する多くの新機能も含まれています。 、投稿中... ..(やあ、ちょっと話がそれましたね。)

この時点で、元の Web ページのフォームにそのような要素を見つけました

私の最初の反応は、「ああ、これは CSS を使用してスタイルをカスタマイズするだけだ」というものでした。その後、当然のことながら、特定のスタイルが Baixin でどのように記述されているかを確認する準備をしました。 com 後でわかります...

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

コードをコピーします

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

Chrome ブラウザを更新して次の内容を確認します:

これがデフォルトのスタイルであることは間違いありません。このデフォルトのスタイルを変更するのが難しいのは、ブラウザごとに異なることです。インターネットから画像を拝借すると、それがよくわかります。 :

(つまり、あなた方ブラウザはまったく従順ではなく、ブラウザ同士のコミュニケーションもうまくいっていないのです。あなたは自分自身をとても誇りに思っていますが、フロントエンドのクラスメートは苦しんでいます、妹)
しかし、この方法はまだ非常に優れています。私が考えたのは、入力を要素でラップし、他の必要な要素を要素に追加し、目的の効果を達成するためにスタイルを設定することです。入力要素の位置の値を絶対に設定します。 、周囲の要素を塗りつぶし、入力を透明にするだけです。
HTML コードは次のとおりです:

コードをコピー

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

クリックしてアップロード " />

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

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

#input-file {
position:relative; /* 子要素の位置を確認します*/
width: 120px;
高さ: 30px;
背景: 1px ソリッド #ccc;
カーソル:
#text {
表示: インラインブロック ;
カラー: #666;
フォントサイズ: 18px; 🎜>}
#file {
display: block;
position: abstract;
left: 0;
width: 120px;周囲の要素と一致する高さ*/
height: 30px ;
opacity: 0; /* 古いブラウザと互換性があります*/
filter: alpha(opacity=0) ); /* IE と互換性があります */
}


表示効果は次のとおりです:






kimoji...

8回繰り返しましたが、このようにボタンにすると、マウスホバー時にクリックできるはずですが、すべての要素にcursor: pointer;を追加しても、まだバグがあります。 、プロパティ、一部の領域は引き続きポインターとして表示されますが、この問題を解決できる専門家はいますか?