入力ファイルのカスタムボタンの美化（デモ）
|
以前にも同じような記事を書いたことがありますが、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 サイトのエディターに直接コピーすることはお勧めしません。
推薦する
ログインボックスのメールプロンプトを実装するネイティブJS
この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...
MySql SQL最適化のヒントの共有
ある日、内部結合を含む SQL ステートメントの実行速度はそれほど遅くはない (0.1 ～ 0.2)...
SpringBoot プロジェクトの Docker クイック デプロイメントの紹介
1. Dockerをインストールするまず Linux 環境を開き、次のコマンドを入力してインストール...
mysql5.7.19 winx64 インストールおよび構成方法のグラフィック チュートリアル (win10)
mysql 5.7.19 winx64のインストールチュートリアルは以下のように記録され、みんなと...
JS配列インデックス検出におけるデータ型の問題の詳細な説明
WeChat アプレット プロジェクトを書いていたとき、その中に「都市選択」機能がありました。作者は...
主要ブラウザとそのカーネルの紹介
トライデント コア: IE、MaxThon、TT、The World、360、Sogou Brows...
Vue-Routerのインストールと使用方法の詳細な説明
目次インストールルーティングの基本構成Vue にルーターをインストールするルーターの設定Router...
MySQL データをエクスポートする際の secure-file-priv 問題の解決方法
エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...
データベースアカウントのパスワード暗号化の詳細な説明と例
データベースアカウントのパスワード暗号化の詳細な説明と例データベースアカウントとパスワードはデータベ...
Linux環境にJDK1.8をインストールする
目次1. インストール環境2. インストール手順ステップ1: インストールパッケージをダウンロードす...
Vue2.x の応答性の簡単な説明と例
1. Vue レスポンシブの使用法を確認する Vue の応答性は、私たち全員がよく知っています。 ...
Vue でデータコレクターを設計する
目次シナリオ中核問題ステータス監視状態監視の利点国家監視の欠点復興実行のアイデア依存関係の収集要約す...
Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題
目次1. 問題の説明2. 原因分析3. 解決策4. 処理1. 問題の説明調整センターでは、最後の 2...
シングルサインオン制御を実装するためのVueの完全なコード
参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...
Linux の ufw ファイアウォールの紹介
Linux のufw (Uncomplicated Firewall) を見て、ファイアウォールに変...