ホームページ > 記事 > ウェブフロントエンド > 入力ファイルカスタムボタン美化(デモ)_HTML/Xhtml_Webページ制作
入力ファイルカスタムボタン美化(デモ)_HTML/Xhtml_Webページ制作
- WBOYオリジナル
- 2016-05-16 16:40:481448ブラウズ
以前このような記事を書きましたが、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);
カーソル:ポインター;
}
コードをコピーします
コードは次のとおりです:デモ:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。