コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 入力ファイルカスタムボタン美化(デモ)_HTML/Xhtml_Webページ制作

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

WBOY
リリース： 2016-05-16 16:40:48
オリジナル
1483 人が閲覧しました

以前このような記事を書きましたが、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);
カーソル:ポインター;
}

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




デモ:

関連ラベル：
file input 美化する
ソース：php.cn
前の記事：HTMLタグセマンティクス入門_HTML/Xhtml_Webページ制作 次の記事：code_HTML/Xhtml_Web ページ制作を実装するために選択ドロップダウン ボックスの値を ID に転送する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
HTML テーブル内のオブジェクトのネストされた配列を反復して表示します ネストされたオブジェクトの配列を含む次の入力があります。 summary は親オブジェクト配列、run_type はネストされたオブジェクト配列です。 letinput={&quo...
から 2024-04-05 14:11:42
0
1
1373
React に入力の終了タグをレンダリングさせますか? 珍しいお願いがあります。私の Web サイトは React を使用して構築されており、公開 Web サイトの HTML を自分の React コンポーネントにコピーできるようにした...
から 2024-04-03 23:01:01
0
1
320
Shopware 6 プラグイン: ブール構成を削除して複数選択構成に移行する方法 現在、プラグインを通じて送信されたレビューを自動的に公開するブール型 reviewSkipModeration 値で構成されている Shopware6 プラグインがあります: co...
から 2024-04-03 23:09:28
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート