入力ファイルの制御と美化について

入力ファイルの制御と美化について

一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアログボックスが表示されます。この機能を実現するには、入力ファイルコントロールを使用するだけです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!doctype html >     
  2. < html   lang = "ja" >     
  3. <ヘッド>     
  4.    <メタ 文字セット= "UTF-8" >     
  5.    <タイトル>ドキュメント</タイトル>     
  6.    <スタイル> </スタイル>     
  7. </ヘッド>     
  8. <本文>     
  9.   <入力 タイプ= "ファイル"  = "ファイルを選択"   />     
  10. </本文>     
  11. </html>     

効果画像は次のようになります。

知らせ!これはテキストとボタンで構成されているとは思わないでください。これは実際にはファイル コントロールです。

今日、仕事で「ファイルが選択されていません」と表示しないという要件に遭遇しました。1 時間ほどいじくった後、幅の値を設定すると問題が解決することがわかりました。

コード: <input type="file" value="ファイルを選択" />

幅の値は、以下に示すように 70px に設定されています。

【美化】

アイデア:

外側の div は、内部の入力の位置参照を提供するためのものです。スタイルを記述するときには相対的な位置指定が必要なため、実際のファイル コントロールがシミュレートされたファイル コントロールを覆い、ファイル コントロールを非表示にします (ファイル コントロールが表示されていない場合でも)。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!doctype html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4.    <メタ 文字セット= "UTF-8" >   
  5.    <タイトル>ドキュメント</タイトル>   
  6.    <スタイル>   
  7. .file-box{ 位置:相対;幅:340px}
  8. .txt{ 高さ:22px; 境界線:1px 実線 #cdcdcd; 幅:180px;}
  9. .btn{ 背景色:#FFF; 境界線:1px 実線 #CDCDCD; 高さ:24px; 幅:70px;}
  10. .file{ 位置:絶対; 上:0; 右:80px; 高さ:24px; 不透明度:0; 幅:260px; }
  11.    </スタイル>   
  12. </ヘッド>   
  13. <本文>   
  14.      <br> <br>   
  15.      < div  クラス= "ファイルボックス" >     
  16.          <フォーム アクション= ""  メソッド= "投稿"   enctype = "multipart/form-data" >     
  17.          <入力 タイプ= 'テキスト'  名前= 'テキストフィールド'   id = 'テキストフィールド'  クラス= 'txt'   />     
  18.          <入力 タイプ= 'ボタン'  クラス= 'btn'  = '参照'   />     
  19.          <入力 タイプ= "ファイル"  名前= "ファイルフィールド"  クラス= "ファイル"   id = "ファイルフィールド"  サイズ= "28" />     
  20.      </フォーム>     
  21.      </div>     
  22. </本文>   
  23. </html>   

効果:

入力ファイルのコントロールと美化に関する上記の記事は、エディターがあなたと共有するすべてのコンテンツです。これが参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

<<:  MySQL データベース トランザクション例のチュートリアル

>>:  異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

推薦する

Docker-compose は Docker プライベート ウェアハウスのステップを迅速に構築します

docker-compose.ymlを作成し、次の内容を入力します。 バージョン: '3&#...

MySQL 接続とコレクションの簡単な分析

結合クエリ結合クエリとは、2 つ以上のテーブル間のマッチング クエリを指し、一般的には水平操作と呼ば...

CSS スタイルを使用して表のフォントを垂直中央に配置する方法

CSS スタイルを使用して表内のフォントを垂直方向に中央揃えする方法は次のとおりです。下図のようなカ...

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

UbuntuにProtobuf 3をインストールするための詳細なチュートリアル

いつインストールするかprotoc コマンドを使用しても Protoc が見つからない場合は、インス...

Linux テキスト検索コマンド find の詳細な使用方法

find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

MySQL 使用仕様の概要

1. InnoDBストレージエンジンを使用する必要がありますCPU と IO のパフォーマンスが向上...

Jenkins+Docker継続的インテグレーションの実装

目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...

既存のMySQLデータベースの文字セットを統一する方法

序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...

Web デザインでフラッシュ オーバーレイ ポップアップ レイヤーの z-index プロパティを設定しても機能しない

デフォルトでは、Flash は常にページのトップレベルに表示されます。つまり、ページに DHTML ...

Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法

目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...

あるテーブルのデータの列を別のテーブルの列にコピーするMySQLメソッド

mysql 1 つのテーブル列を別のテーブルにコピーする場合によっては、フィールドから別の新しいフィ...

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

CentOS7.6 システムで yum を使用して lnmp 環境を構成する方法

1. インストールバージョンの詳細 サーバー: MariaDB サーバーバージョン: 5.5.60-...