input type=file style_HTML/Xhtml_Webページ作成の定義方法

なぜファイルコントロールを美しくするのでしょうか?想像してみてください、他の子供たちは皆きちんとした服を着ていて美しいのに、そのうちの2人はあなたを見下していません、それはとても不調和です。

元のファイル コントロールは次のようなものです:

これがテキストとボタンで構成されているとは考えないでください。 これはコントロールです 。HTML コードは次のとおりです:

コードをコピーします

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

>
この場合、テキストとボタンを使用してこのファイルのスタイルを表示します。HTML コードは次のとおりです:

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

< ;/form>
div>


div の外側の層は、スタイルを記述するときに相対的に配置する必要があるため、内部の入力の位置参照を提供します。実際のファイル コントロールはシミュレートされたファイル コントロールを覆い、ファイル コントロールを非表示にします (ファイル コントロールが表示されない場合でも)。CSS コードは次のようになります。

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

.file-box{ Position:relative;width:340px}

.txt{ height: 22px; ボーダー:1px ソリッド #cdcdcd; 幅:180px;}
.btn{ 背景色:#FFF; ボーダー:1px ソリッド #CDCDCD; 高さ:24px;}
.file{ 位置:absolute; 上:0; 右:80px; フィルター:アルファ(不透明度: 0; 幅:260px) }
レンダリング:

ついにデモを終了しました: クリックしてデモを表示

ボディ>