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

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

推薦する

Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法

問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...

Jenkins + Docker + ASP.NET Core の自動デプロイメントの問題について (落とし穴を避ける)

このブログを書くつもりはなかったのですが、実際の操作中に、ネットワークの問題に圧倒されたこと (ネッ...

CSS3を使用して背景画像の色を変更するさまざまな方法

CSS3 では画像の色を変更できます。これからは複数の絵をデザインする必要がなくなり、いつでも修正で...

HTMLの最適化によりWebページの速度が向上

明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...

泡の小さな鋭角効果を実現するCSS

効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...

Spark RDD をデータフレームに変換し、それを MySQL に書き込む例

DataframeはSpark 1.3.0で導入された新しいAPIで、Sparkで大規模な構造化デー...

メモリの原則に関する詳細な説明: JS では変数はヒープに保存されるのか、スタックに保存されるのか?

目次1. 冷蔵庫に入りきらない象2. シャドウクローン文字列3. 実際に見た「奇妙なボール」 4. ...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

Vue で PC 解像度の適応を実装するためのサンプルコード

目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...

ウェブメッセージボード機能を実現するjs

この記事の例では、Webメッセージボードを実装するためのjsの具体的なコードを参考までに共有していま...

MySQL レプリケーションの原理と実際のアプリケーションの詳細な説明

この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...

Vueでキャッシュされたページを管理する方法

目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...

固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析

ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...

リンクAの意味論、書き方、ベストプラクティス

リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。私は JavaEy...

JavaScript の手ぶれ補正とスロットリングの説明

目次安定スロットリング要約する安定自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始し...