inputタグをカスタムする

フォームをつかってファイルをアップロードしたいときに、

<input class="file" type="file" />

とinputタグをつかうことになりますが、IEのことを考えるとこいつのカスタムがなかなか厄介なのでメモをしておきます。

HTML

<div class="btn photo">
    <div class="inner">
        <form class="form">
            <p class="txt">FILE</p>
            <input class="file" type="file" accept="image/jpeg, image/png" />
        </form>
    </div>
<divi>

SCSS

.btn {
    margin: 120px auto; 
    width: 80px;
    overflow: hidden;
}

.inner {
    display: inline-block;
    position: relative;
    width: 80px; height: 45px;
    border-bottom: solid #9c3939 4px;
    border-radius: 12px;
    cursor: pointer;
    background: #dc5252;
    text-decoration: none;

    &:hover {
        margin-top: 4px;
        border: none;
    }
}

.txt {
    color: #dca3a3;
    font: 20px "AvenirNext-Heavy" bold;
    text-align: center;
    line-height: 45px;
}

.file {
    position: absolute;
    font-size: 99px;
    bottom: 0; right: 0;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
}

DEMO

ポイントは、

1. デザインを整えるためにinputタグを透明にする
2. 当たり判定確保のためにinputタグを大きくしとく（font-size等で調整）
3. 当たり判定確保のためにinputタグを右寄せにしておく（IE対策）

の3点かと思われます。