対応ブラウザをIEからChromeに変更する時の注意点その５(input type="file")の違い

対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。

発生問題点

input type="file"を使用しているとIEとChromeで見た目の違いが発生する

環境

OSはWindows10
- バージョン：1909(OS ビルド 18363,1256)
Microsoft Internet Explorer
- バージョン：11.1198.18362.0
Google Chrome
- バージョン： 88.0.4324.96(Official Build) (64ビット)

画面イメージ

IEとChromeでinput type="file"を使用した場合の見た目は以下のようになる。

使用HTML

 1  <!DOCTYPE html>
 2  <html>
 3  <style>
 4  #file::-ms-value {
 5   background-color:#ccffcc
 6  }
 7  </style>
 8  <title>FILE</title>
 9  
 0  <input id="file" type="file" >
11  </html>

解決方法

『input type=”file”』を『display:none』で非表示として、代わりに『readonly』の『input type=”text”』と
ボタンを使用する。

画面イメージ

Chromeでの表示

ソース

 1  <!DOCTYPE html>
 2  <html>
 3  <script
 4    src="https://code.jquery.com/jquery-2.2.4.min.js"
 5    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 6    crossorigin="anonymous">
 7  </script>
 8  <style>
 9  input[readonly] {
 0   background-color:#ccffcc
11  }
12  </style>
13  <title>FILE</title>
14  <!-- 代わりのテキストボックス(readonly) -->
15  <input id="file_name" type="text"  readonly="readonly" />
16  <label for="file">
17    <!-- 非表示にする(type="file") -->
18    <input id="file" type="file" style="display: none;" />
19    <!-- 代わりのボタン -->
20    <p style="cursor: pointer; padding: 1px 10px; background-color: #dedede; border: solid 1px #b7b7b7; display: inline-block;" >参照...</p>
21  </label>
22  <script type="text/javascript">
23    $(function(){
24  	  $(document).on('change','input[type="file"]',function(){
25  	  if ($(this).prop('files').length != 0) {
26  	  		$('#file_name').val($(this).prop('files')[0].name);
27  	  }else{
28  	 	 	$('#file_name').val("");
29  	  }
30      });
31    });
32  </script>
33  </html>