入力ファイルのカスタムボタンの美化（デモ）
|
以前にも同じような記事を書いたことがありますが、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 サイトのエディターに直接コピーすることはお勧めしません。
推薦する
JavaScript でネットワーク速度をテストする方法
目次序文ネットワーク速度のフロントエンド判定原理のまとめ1. img を読み込むか Ajax リクエ...
CSS 標準: vertical-align プロパティ
<br />原文: http://www.mikkolee.com/13私は最近、ver...
Docker に Elasticsearch 7.6.2 をインストールするチュートリアル
DockerをインストールするDocker をインストールする必要がありますが、それ以上の指示はあり...
MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)
質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...
win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順
アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...
Alibaba Cloud で MySQL リモート接続を構成するための詳細な手順
序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...
MySQL 5.7.10 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)
MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...
Ubuntu 16.04 mysql5.7.17 リモートポート 3306 を開く
MySQLへのリモートアクセスを有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...
CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明
目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...
MySQLのレプリケーションの詳細な分析
1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...
DIVのぼかし機能を実装する方法
マウスを動かしたときにDIVが消えるように手ぶれ補正を使用するdiv タグ自体は onblur イベ...
JSX を使用してカルーセル コンポーネントを実装する方法 (フロントエンドのコンポーネント化)
JSX を使用してコンポーネント システムを構築する前に、例を使用してコンポーネントの実装原理とロ...
MySQL 5.7.18 zip バージョンのインストールと設定方法のグラフィック チュートリアル (win7)
Windows に mysql5.7.18zip バージョンをインストールするには、使用前に解凍し...
システム CD をマウントして yum ウェアハウスを構築する VMware 15.5 バージョンのグラフィック チュートリアル
1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...
Dockerボリューム削除操作
プルーンこのコマンドを使用するには、クライアントとデーモンの両方の API バージョンが少なくとも ...