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

入力タイプ=ファイルスタイルを定義する方法
ファイルコントロールを美しくする理由は何ですか?他の子供たちはみんなきちんとしたきれいな服を着ているのに、そのうちの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は画像のドラッグアンドドロップ機能を実装します

推薦する

HTMLボタンを中央に配置する方法

HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...

Vue パッケージ化後の空白ページの解決策

1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...

ネイティブ js が携帯電話のプルダウン更新を模倣

この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...

Tomcat 例外の解決方法 (リクエスト ターゲットに無効な文字が見つかりました。有効な文字は RFC 7230 および RFC 3986 で定義されています)

1. シナリオ表示Tomcat ログに次の例外情報が時々報告されます。何が起こっているのでしょうか...

Jenkins Docker 静的エージェント ノードのビルド プロセス

静的ノードはマシン上に固定されており、いくつかの固定コマンドを通じて起動されます。動的ノードには複数...

MySQLデータベースのスケジュールバックアップを実装する方法

1. シェルスクリプトを作成する vim バックアップdb.sh 次のようにスクリプトを作成します。...

画像をクリックして切り替えるJavaScript

クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替...

docker で mysql に接続できない場合の解決策

シナリオ: 仮想マシンの Docker コンテナに最新バージョンの MySQL をインストールした後...

Docker イメージを削除できません エラー: そのようなイメージはありません: xxxxxx 解決策

序文docker イメージを削除できません。docker docker imagesを確認すると、イ...

Linux で killall コマンドを使用してプロセスを終了する 8 つの例

Linux コマンドラインには、プロセスを強制終了するためのコマンドが多数用意されています。たとえば...

Ubuntu環境でのSSHの詳細なインストールと使用

SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...

MySQL での %% のようなファジークエリの実装

1、%: 0 個以上の任意の文字を表します。あらゆるタイプと長さの文字に一致します。場合によっては、...

js配列のfind、some、filter、reduceの違いの詳細な説明

Array の filter、find、some、reduce メソッドの違いを区別し、使用シナリオ...