ファイル添付ボタンのカスタマイズ（wordpress / mwwpform）

タイトル通り。
Wordpressで使用しているフォームプラグイン MW WP FORMのファイル添付ボタンをカスタマイズする。
chromeとedgeでデザインが異なること、またレスポンシブを考えての変更。

1.HTML

<dt>画像</dt>
<dd><label for="file_upload" class="fileup_label"><span class="fileup_btn">ファイルを選択</span></label>[mwform_image name="画像" id="file_upload"]<span id="fileup_name"></span></dd>

2.CSS

form {
	label.fileup_label {
		& + input[type="file"] {
			display: none;
		}
	}
}

fileup_btnのボタンデザインは適当に。

3.JS

jQuery(function($) {
	$(document).on('change', '#file_upload', function(){
		var file = $(this).prop('files')[0];
		$('#fileup_name').text(file.name);

	});
	$('.mwform-file-delete').click(function() {
		$('#fileup_name').text("");
	});
});

試行錯誤したので余分な記述が多い気がする。
あとで要調整。