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

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

推薦する

Linux inotifyリアルタイムバックアップの実装方法の詳細説明

リアルタイム レプリケーションは、企業データをバックアップする最も重要な方法です。主に、ユーザーが送...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

Linux で一般的なソフトウェアを設定する方法

新しいLinuxサーバーを入手する場合、通常は次の5つの構成を実行する必要があります。 HOSTAN...

シンプルな商品スクリーニング機能を実現するjs

この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

Redhat 7.3 に MySQL 8.0.22 をインストールするための詳細なチュートリアル (バイナリ インストール)

目次1. MySQLインストールパッケージをダウンロードする2. MySQLのアンインストール手順3...

シンプルなタブバー切り替えコンテンツバーを実装するJavaScript

この記事では、タブバーの切り替えコンテンツバーを簡単に実現するためのJavaScriptの具体的なコ...

Vueカスタムツリーコントロールの使い方の詳細な説明

この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...

display:olck/none を使用してメニューバーを作成する方法

display:bolck/none によるメニューバーの完成の効果 図 1:まず、完成したエフェク...

HTML のテキストエリアの改行問題の概要

最近、Textrea に転送したときに、データが本当に行ごとに保存できるかどうかという問題に遭遇しま...

CentOS6で定期的にjarプログラムを実行するスクリプトをcrontabで実行する

1. 簡単なJavaプログラムを書く パブリッククラステストシェル{ パブリック静的voidメイン(...

MySQLクエリ最適化に必須の知識ポイントのまとめ

序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...

HTML と CSS の命名規則の概要

CSS命名規則 ヘッダー: ヘッダーコンテンツ: コンテンツ/含むフッターナビゲーション: navサ...

WeChatアプレットは水平および垂直スクロールを実現

この記事の例では、WeChatアプレットの水平スクロールと垂直スクロールを実現するための具体的なコー...