<input type="file"> タグのマウスカーソル問題

<input type="file">はファイルを選択できる便利なタグですがブラウザによって表示が変わります。ファイルが選択されている時/されていない時の表示も違います。


そこでブラウザによって同じ表示にしたい場合、好みの装飾をしたい場合に用いられる手法としてfileタグを透明にする方法があります。動きの部分だけfileタグにまかせて、表示の方は自分で記述するわけです。

*************ソース****************
<div class="btn">ファイルを選択<input type="file"></div>
<style type="text/css">
.btn {
   display: inline-block;
   position: relative;
   overflow: hidden;
   border: #ccc solid 1px;
   border-radius: 5px;
   background:linear-gradient(to bottom, #fff, #ddd);
   color: #333;
   text-align: center;
   padding: 5px 10px;
   margin-right: 5px;
   cursor: pointer;
   float: left;
}
.btn:hover {
   background:linear-gradient(to bottom, #ccc, #bbb);
}
.btn input[type="file"] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;   
   cursor: pointer;  /* カーソル */
   opacity: 0;
}
</style>
*************ソース****************

ここで問題となるのが /*カーソル*/ の部分です。
IE、FireFoxはこれに従ってくれるのですが、Chromeは無視します。
それだけならまだしもChromeの場合width,heightも無視されるようです。opacityは反映されますので一見問題なさそうですがマウスオーバーすると変なことになります。

どうなるかというと、デフォルトの大きさのfileボタンの部分は通常カーソルですが、divの方のcursorは反映されますので、（実際に見える）divボタンと（実際には見えない）fileボタンの隙間だけマウスカーソルが手になるのです。

私の探し方が悪いのか、検索から「Chromeは<input type="file">のcssを（一部）反映しない」という結果にたどり着くのに時間がかかりました。
改めて他サイトを眺めてみると、この状態で公開されているサイトが多くありました。回避方法はなさそうです。素直にデフォルトのボタンを使用するか<input type="file">を使わずにJavaScriptで実装すべきなのでしょう。