【重要】サービス終了のお知らせ

Fork
2
Fav
1
View
17680
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 38 lines
  • HTML 17 lines
  • CSS 147 lines
input type="file" をCSSだけで装飾する。CSSでは装飾できないことで有名なinput type="file"を、
できるだけ装飾してみた。
…と言うより、本物を見えなくしてフェイクのinputを作って、JavaScriptから操作するようにしてみた。


■内容
・Chrome23.0.1, Firefox17, Opera12, IE9,8,7で正常に表示されるのを確認。

・「参照」ボタンを押しても、textboxを押しても参照ダイアログが起動。

・ファイルを参照するとtextbox内にファイル名が入る。ファイル名が長い場合は「...」と省略される。

・「アップロード」ボタンがあった場合で作ってみた。押しても何も起こりませんが。

・画面内に複数入れたい場合は、"uploader"を複数入れることで対応可能。

・JavaScriptが無効な状態にも対応。無効な環境では普通のブラウザデフォルトのinput type="file"が出現し、
 アップロードボタンの左に並びます。

IEは画像作ってないので必要であれば足してください。
※IEのfilterでグラデ作ろうかとも思ったけど、あんまりすきじゃないので使ってません。

■ポイント
IE対策。trigger()で、潰して見えなくしたinput=fileをJavaScript経由でクリックさせる方法は
IEには通用しないので(無効にされる)、力技でtextboxの上に透明にして重ねる方法を取りました。
ただ、IEのデフォルトのinput=fileは、

・参照したファイル名が入るテキストbox部分をクリックしても参照ダイアログが立ち上がらない。
・中身のテキストも修正可能

ということなので、font-sizeを大きくすることで「参照...」と書いてあるボタンのサイズを調整、
overflow: hiddenでカットという荒業で乗り切りました。

フェイクのinput要素(".text")は、
contenteditable="false" readonly="true"を付けることでタブキーなどでのフォーカスをお断りしています。
  • input type="file" をCSSで装飾し、かつ機能させる(IE7~も対応)
  • jQuery v1.8.3
  • input type="file" をCSSで装飾し、かつ機能させる(IE7~も対応)

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

hirotweets

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by