入力タイプ=ファイルスタイルを定義する方法

入力タイプ=ファイルスタイルを定義する方法
ファイルコントロールを美しくする理由は何ですか?他の子供たちはみんなきちんとしたきれいな服を着ているのに、そのうちの2人があなたを無視していると想像してみてください。とても不調和です。

元のファイル コントロールは次のようになります。

これはテキストとボタンで構成されているとは思わないでください。これはコントロールです。HTML コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<input type="ファイル" name="ファイル" />

この場合、テキストとボタンを使用してこのファイルのスタイルを表示します。HTML コードは次のとおりです。

コードをコピー
コードは次のとおりです。

<div class="ファイルボックス">
<フォームアクション="" メソッド="post" enctype="multipart/form-data">
<入力タイプ='テキスト' 名前='テキストフィールド' id='テキストフィールド' クラス='txt' />
<input type='button' class='btn' value='参照...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="アップロード" />
</フォーム>
</div>

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

コードをコピー
コードは次のとおりです。

.file-box{ 位置:相対;幅:340px}
.txt{ 高さ:22px; 境界線:1px 実線 #cdcdcd; 幅:180px;}
.btn{ 背景色:#FFF; 境界線:1px 実線 #CDCDCD; 高さ:24px; 幅:70px;}
.file{ 位置:絶対; 上:0; 右:80px; 高さ:24px; フィルター:アルファ(不透明度:0);不透明度: 0;幅:260px }

効果画像:
クリックして元の画像を表示
最後に、デモを残します: デモを見るにはクリックしてください


ヒント: 実行前にコードの一部を変更することができます

<<:  CSSを使用して画像フレームアニメーションと曲線の動きを実装する

>>:  Vueは画像のドラッグアンドドロップ機能を実装します

推薦する

CentOS7にsshをインストールして設定する

1. openssh-serverをインストールする yum インストール -y openssl o...

各 Nginx プロセスで開くことができるファイルの最大数を設定する方法

1. システム内で開いているファイルの最大数を確認する #現在のリソース制限設定を表示する ulim...

Nginx_geo モジュールを使用して CDN スケジュールを設定する方法

NginxのGeoモジュールの紹介geo ディレクティブは、ngx_http_geo_module ...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

MySQL 5.7.21 winx64 グリーンバージョンのインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 5.7.21のインストールと設定方法を記録しています。具体的な内容は以下のと...

Linux システムで httpd の自動インストールと構成を Ansible で実装する方法

1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...

WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法

まず、 esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqt...

Ubuntu でパスワードを変更し、パスワードの複雑さのポリシーを設定する方法

1. パスワードを変更する1. 一般ユーザーのパスワードを変更する パスワード現在のパスワードを入力...

Linuxシステムはルートアカウントのリモートログインコマンドを禁止しています

ps: Linux システムで root アカウントのリモート ログインを無効にする方法は次のとおり...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

Bootstrap 3.0 学習ノート グリッドシステムの原則

前の 2 つの記事の簡単な紹介を通じて、Bootstrap についての基礎的な理解が得られました。 ...

Docker での Jenkins と Docker を使用した継続的デリバリー

1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...

JSコードコンパイラMonacoの使い方

序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...

Docker が MySQL イメージをプルするのが遅すぎる問題を解決する

Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...