対応ブラウザを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>