Web制作メモ -トップへ-

[CSS] display:noneで機能が無効化されないようにする

HTML&CSS2015.03.14 13:00

画面に表示させない目的でdisplay:none;を使うことがありますが、display:none;を使うと、表示だけでなくその機能も無効になってしまうことがあります。

IEやAndroidの標準ブラウザなどで発生します。chromeでは発生した記憶はありません。

「機能も無効」というのは、例えば、display:none;で隠してあるinput[type=file]にクリックイベントを送信しても、クリックイベントは正常に送信されているのに「ファイルを選択」ダイアログボックスが立ち上がってこない、と言ったことです。

input要素が画面上に表示されないだけでなく、input[type=file]の機能自体も無効にされてしまっています。

displayという名前なので表示に関してだけと思いがちですが、ブラウザによっては機能もバッサリ無効にしてしまいます。

input要素以外でも、iframeを使用する場合など、display:noneでは上手く行かないケースが稀にあります。

そのような場合は、display:none;を使わずposition:fixed;で画面上から見えなくすると上手く行きます。

見えなくしたい要素にposition:fixed;を指定して、その要素の大きさ以上、画面外に追いやれば、機能を活かしたまま非表示にできます。

position:fixed;を使って要素を非表示にする

input[type=file] {
    position: fixed;
    bottom: -100px;
}