ブートストラップ ファイル入力: ファイル セレクター表示の変更
ブートストラップ 4 のファイル ブラウザーを使用すると、デフォルトの「選択」が表示されるという問題が発生する場合があります。ファイル...」のテキスト。このテキストは、.custom-file-control 要素の CSS を使用して設定されますが、JavaScript を使用して変更するのは難しい場合があります。
Bootstrap 5
Bootstrap 5 では、カスタムファイル入力が削除されました。したがって、ファイル セレクターの表示を変更するには、カスタム CSS または JavaScript テクニックが必要です。
Bootstrap 4.4
Bootstrap 4.4 で選択したファイル名を表示するには、JavaScript を使用できます。
<code class="javascript">document.querySelector('.custom-file-input').addEventListener('change',function(e){ var fileName = document.getElementById("myInput").files[0].name; var nextSibling = e.target.nextElementSibling; nextSibling.innerText = fileName; });</code>
Bootstrap 4.1
Bootstrap 4.1 以降では、「Choose file...」プレースホルダーが .custom-file-label 要素に設定されます。
<code class="html"><label class="custom-file-label" for="exampleInputFile"> Select file... </label></code>
ボタンのテキストの変更は CSS で行うことができます:
<code class="css">.custom-file-input ~ .custom-file-label::after { content: "Button Text"; }</code>
元の回答 (Bootstrap 4 Alpha 6)
最初のプレースホルダーを変更するには
<code class="css">#customFile .custom-file-control:lang(en)::after { content: "Select file..."; } #customFile .custom-file-control:lang(en)::before { content: "Click me"; }</code>
選択したファイル名を取得して表示を更新するには、JavaScript を使用できます。
<code class="javascript">$('.custom-file-input').on('change',function(){ var fileName = $(this).val(); });</code>
ただし、プレースホルダー テキストは擬似要素であるため、JavaScript で直接変更することはできません。回避策は、疑似コンテンツを非表示にする CSS クラスを追加し、ファイル名を .form-control-file スパン:
<code class="css">.custom-file-control.selected:lang(en)::after { content: "" !important; }</code>
<code class="javascript">$('.custom-file-input').on('change',function(){ var fileName = $(this).val(); $(this).next('.form-control-file').addClass("selected").html(fileName); });</code>に配置することです。
以上がブートストラップでファイルセレクターの表示を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)
