見た目をデフォルトから変更したい時があると思います。inputタグへのCSS適用ではあまり見た目を変えることができません。見た目を変更していきます。ファイル名を表示するためにJavascriptも少しだけ使用します。実装イメージ今回実現したいものは、下記のように好きな見た目でファイル選択できる機能です。選択したファイル名も表示するようにします。複数選択にも対応できるようにします。.deco-fileクラスで囲んでおきます。7行目はファイル名を表示する領域です。input要素にmultiple属性を付与しておきます。type=”file”を非表示にし、ラベル要素にいい感じのスタイルを適用します。none;}JS:ファイル名の表示ファイル選択されたときにファイル名を表示する機能の部分です。6行目からのfor文で、選択されたファイルすべてのファイル名を取得し表示しています。{parent.querySelector('.file-names').insertAdjacentHTML('beforeend',file.name+"<br>");}})})jQuery上記のファイル名の表示をjQueryで行う場合は下記のようなコードになります。})})デモ実際に動かせるデモを用意しました。下の『ファイルを選択』をクリックしてファイルを選択すると、ファイル名が表示されるようになっていると思います。最後にコード全文を載せておきます。type=”file”の見た目を変更する方法でした。Posts関連記事は見つかりませんでした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。views2021/1/202023/5/13タイトルとURLをコピーしました。