カスタマイズ入力タイプ= CSSを使用した「ファイル」

このタイプの入力をカスタマイズ(外観を変更)する方法はいくつかあります。 それらのすべてにプラスとマイナスがありますが、 私の意見では、マイナスでさえ勝ちを提案したオプションは1つしかありません。



これらの最も代替的な方法は、JavaScriptを介したなりすまし、これはフラッシュローダー、またはhref = mailto =)です。



それぞれの長所と短所は非常に明白で理解しやすいと思います。 JavaScriptのフラッシュローダーを備えた最も一般的なバージョンは、歪みがはるかに少ないです。 私の観察によると、スタイルは一般的な単位でこれを行います。



スタイルオプションには1つの大きな(およびそのような入力のすべてのサイトと配置オプションに大きな??)マイナスがあります。その結果、コピーアンドペーストファイルのアドレスを挿入できなくなり、非常に便利な場合があります。



さて、十分な話-始めましょう。 個々のケースで寸法を確認する必要があることにすぐに注意します。そうしないと、IEで不快な瞬間が生じる可能性があります。



このページで例を見ることができます-absolvo.ru/tmp/17



  <!DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns = "http://www.w3.org/1999/xhtml">
 <head>
   <スタイル>
     div {
      オーバーフロー:非表示;
      幅:95px;
      高さ:37px;
      カーソル:ポインター。
      背景:url(input-file.gif)no-repeat;
     }
    入力{
      不透明度:0;
      フィルター:アルファ(不透明度:0);
      フォントサイズ:199px;
      カーソル:ポインター。
      パディング:0px;
      マージン:0px;
      ボーダー:なし;
      マージン左:-450px;
     }
   </ style>
 </ head>
 <本体>
 <div title = "クリックしてファイルを参照">
 <入力タイプ= "ファイル"サイズ= "1" />
 </ div>
 </ body>
 </ html> 




このコードは何をしますか? 手順を説明します。

1.レイヤーを作成し、必要なサイズを指定します。

2.画像​​を準備し、レイヤーの背景に配置します。

3.入力時に大きなフォントサイズ(199pxなど)を指定します。

4.負のマージンを入力するポイント

5.透明度をゼロに表示します。

6.すべてを美しいタイトルにします。



ちなみに、私の同僚はここで彼の脳を掻き、同様の倒錯を思い付きましたが、少し異なる視点で- 彼のブログページをご覧になることをお勧めします(Opera9では動作しません(私はそれを逃しましたが、 二股に気づきました)が、 Opera10ではすべてがうまくいきます)。 おそらく、コードを最適化または削減する方法を考えたことがありますか? もしそうなら、気軽に共有してください! :)



iPhoneを持っている携帯電話でこの方法をテストすることは残っていますが、スタジオでスクリーンショットを撮ることはできますか?



All Articles