inputのtypeが”file”の時の選択エリアの話

はじめに

株式会社イメージ・マジックの技術ブログ、今週の担当のsoenoです。

今朝の神田は雨でした。

技術が発達すると傘を差さずにぬれずに通勤なんてことも可能になるのでしょうか。

さて、今回は仕事中にはまったcssについてです。

というか、タイトル通り<input type=”file”>で指定したはずの選択エリアの話で、

指定したつもりのエリアと食い違うことがあるという話です。

前提

状況としては結構色々やらないと発生しないのでニッチな投稿となるのですが、

– <input type=”file”>を使用している。
– カスタマイズしている。<input>は非表示にして使用。
– ボタンエリアは結構狭め。

な感じで発生します。

挙動

ボタンの外を押してもイベントが発生する。

要素にボーダーを付けたりして調べてもそれらしきサイズの要素がない。

再現可能なコードはこんな感じ

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//~略~
<style>
.uploadArea{
  position: relative;
  color: #fff;
  background: #2ab1e7;
  width: 30px;
  height: 30px;
}
.uploadBtn{
  position: relative;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>
 
//~略~
 
<body>
 <div class="uploadArea">
  <label for="uploader">
   <input id="uploader" type="file" class="uploadBtn">
  </label>
 </div>
</body>
 
//~略~

解決法

opacityを１にしてみると何が起きているかすぐにわかります。

inputのタイプがfileの時はアップロード用のボタンがあるが、それがはみ出てしまうというのが今回の不具合の理由でした。

なので修正はuploadAreaのcssに overflow: hidden;を足すだけ。

わかってみるとショックなほど簡単なことなのですが、inputエリアのタイプがfileの時はボタンを持っている。というのを忘れていると、この範囲何？誰？みたいなことになります。

最初に疑ったのはz-indexだったり、opacity:0にした時点で見つけにくくなるわで、結構はまったので取り上げてみました。