入力ファイルのカスタムボタンの美化（デモ）
|
以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示できるという利点があります。 パスを表示せずにカスタム ボタンのみを表示する場合は、別の方法があります。以下では、CSS テクニックを使用してこれを実現します。 重要なのは、ファイル フィールドにフォント サイズを指定し、比較的大きな値を設定することです。これにより、フォームの大文字と小文字が次のように変更されます (外観はブラウザーごとに異なりますが、大文字と小文字は変更されています)。 入力{フォントサイズ:100px;} 次に、位置と透明度を使用して、必要な効果を実現します。具体的なコードは次のとおりです。 コードをコピー コードは次のとおりです。.fileInputContainer{ 高さ:256px; 背景:url(//img.jbzj.com/file_images/article/201212/2012122514125641.png); 位置:相対; 幅: 256ピクセル; } .ファイル入力{ 高さ:256px; オーバーフロー: 非表示; フォントサイズ: 300px; 位置:絶対; 右:0; トップ:0; 不透明度: 0; フィルター:アルファ(不透明度=0); カーソル:ポインタ; } コードをコピー コードは次のとおりです。<div class="fileInputContainer"> <input class="fileInput" type="file" name="" id="" /> </div> デモ： |
<<: Word のコンテンツを Web サイトのエディターに直接コピーすることはお勧めしません。
推薦する
mysql のファイル mysql-bin.000001 とは何ですか? 削除できますか?
ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...
MySQLクエリプランでken_lenの値を計算する方法
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...
Linux (Ubuntu) ユーザーがログイン時に N 回連続して間違ったパスワードを入力すると、システムは自動的に X 分間ロックされます。
1. PAM設定ファイルを編集する sudo vim /etc/pam.d/ログイン2行目に以下を...
Chrome デベロッパー ツールの詳細な紹介 - タイムライン
1. 概要ユーザーは、アクセスする Web アプリケーションがインタラクティブでスムーズに実行される...
Vue プロジェクト コード分割ソリューション
目次背景目的分割前プロセス設計ディレクトリ構造の設計問題分割後プロセス設計ディレクトリ構造の設計問題...
MySQLインデックスに関する詳細を共有する
数日前、同僚からMySQLのインデックスについて質問を受けました。大体わかっているのですが、まだ練習...
MySQL ストアド プロシージャで月ごとにテーブルを作成する方法
詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...
VUEのデータプロキシとイベントの詳細な説明
目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...
JavaScript におけるブラウザ互換性の問題について簡単に説明します
ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換...
MySQL 8.0.17 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...
JS の配列トラバーサルについて、一般的なループをいくつ知っていますか?
序文基本的なデータ構造として、配列とオブジェクトはさまざまなプログラミング言語で重要な役割を果たしま...
Ubuntu は scrcpy をインストールして、携帯電話の画面投影と制御を完了します (Ubuntu で QQ WeChat を使用する別の方法)
Scrcpyのインストールsnap install scrcpy adbサービスのインストールsu...
ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション
ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...
DockerプライベートライブラリHarborのアーキテクチャとコンポーネントの説明
この記事では、Harbor アーキテクチャの構成と、実行時に各コンポーネントを使用する方法について説...
一般的な XHTML タグの紹介
<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...