input type="file" を使って ファイルを選択する時のボタンがあるのですが これがなかなかうまくcssが利いてくれなくて困ってました。 ※しかも、ボタン部分だけでなく、ファイル名が表示される部分も残しつつです なんとか解決策が見つかりましたよー 肝はcssの::before 要素。 ::before 要素を使ってボタン部分をデザインしてください もう一つの肝はinput[type="file"]::-webkit-file-upload-button デフォルトの「ファイルを選択」ボタンの装飾を非表示になるようにcssで調整します デフォルトのボタンの上にデザインしたボタンを重ねるというイメージですね。 HTML <div class="file-upload_area"> <input type="file" id="csv-file" name="files" class