Web制作メモ -トップへ-

[CSS] ファイルを選択ボックスをカスタマイズ

HTML&CSS2014.12.08 14:31

ファイルを選択ボックス(input type=file)はセキュリティの為CSSで装飾できないようになっています。

しかし、各ブラウザが出力する選択ボックスがさまざまで、デザインを統一したい為、どうしても変えたいことがあります。

そういった時、ファイル選択ボックスを透明にして好きな画像の上に覆いかぶせるという方法で、見た目を変更することができます。

表示されるのは画像で、クリックイベントは透明なファイル選択ボックスに渡るというわけです。

HTML

<form method="post" action="" enctype="multipart/form-data" id="form">
<div class="select-button">
    <img src="/img/select-file.png" width="135" height="32" alt="">
    <input type="file" name="file01">
    <input type="submit">
</div>
</form>

CSS

.select-form .select-button {
    position: relative;
    width: 135px;
    height: 32px;
    overflow: hidden;
}
.select-form .select-button input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    font-size: 300px;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    zoom: 1;
    cursor: pointer;
}

用意した画像ファイルが135×32pxだったので、親要素は画像と同じサイズを設定しています。

z-index: 999;で最前面にし、透明のファイルを選択ボックスが覆い被さるように font-sizeを300pxにしています。

font-sizeが14pxとかだとcursor:pointerが効かない隙間ができました。

100pxでも隙間が出来ますが、300pxだと隙間がありません。

ただ、font-sizeが300pxというのが何かスマートじゃないような気がしてしっくりきません。

個人的にはJavascriptで疑似クリックする方法のほうが好みです。

Javascriptが使える環境ならコードもスッキリするのでそちらのほうがいいと思います。

この方法の良いところはJavascriptが無効でも動くという点ですね。