ファイルタイプアップロードボタン美化 style_html/css_WEB-ITnose

まず第一に、各ブラウザの参照ボタンの共通の特徴を理解する必要があります:

1. 全体の幅と高さを設定できますが、IE、Firefox、Opera での幅の設定は影響しません。参照ボタンの幅

2. Google では、入力領域をクリックしてウィンドウをポップアップし、IE では参照ボタンをクリックしてウィンドウをポップアップし、テキスト ボックス領域をダブルクリックします。ウィンドウをポップアップするには、Firefox と Opera の場合は、入力をクリックします。ウィンドウは任意の領域にポップアップ表示されます。

3. 入力フォント サイズを設定すると、IE、Firefox、Opera のトラフィック ボタンが大きくなります。 ）。 (これは非常に重要です);

上記の共通の特徴から、最も必要なのは 3 番目の項目だけです。

これで美化を開始できます:

アイデア: まず a タグを使用してボタンを作成し、幅を設定して overflow:hidden; 属性を追加してから、 を追加します。 a タグ内で、入力を a の右上隅を基準にして配置し、最後に入力の透明度を 0 に設定します。

なぜ右上隅を揃える必要があるのでしょうか?右が右上に揃っているのは、IE、Firefox、Opera ではテキスト状態でテキストボックス上にマウスが置かれているためであり、その理由の 1 つは、IE のテキストエリアにある 3 番目の共通点の理由分母が述べられています。

サンプルコードは以下の通りです:

<style>a{display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden;}a:hover{background:green;}input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}</style>    <a href="#">    <input type="file" value="浏览" /></a>

このようにして、各ブラウザの入力参照ボタンのスタイルが一貫した効果を達成し、ファイルボタンのスタイルが美化されます。