入力ファイルカスタムボタン美化(デモ)_HTML/Xhtml_Webページ制作

以前このような記事を書きましたが、jsスクリプトを使用した利点はファイルパスを表示できることです。

パスが表示されず、カスタムボタンのみを表示する場合は、以下の方法があります。これは単なる CSS テクニックです。

重要なのは、ファイルフィールドに font-size を指定し、以下に示すようにフォームの大文字と小文字が変わるように比較的大きな値を設定することです (ブラウザごとに外観は異なりますが、大文字と小文字は変わります)。

入力{font-size:100px;}

次に、位置と透明度を使用して、必要な効果を実現します。具体的なコードは次のとおりです:

コードをコピー

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

.fileInputContainer{
高さ:256px;
背景:url(http://files.jb51.net/file_images/article/201212/2012122514125641.png);
位置:相対;
幅: 256px;
}
.fileInput{
高さ:256px;
オーバーフロー: 非表示;
フォントサイズ: 300px;
位置:絶対;
右:0;
トップ:0 ;
不透明度: 0;
フィルター:alpha(opacity=0);
カーソル:ポインター;
}

コードをコピーします

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

デモ: