本記事はLIFULLその2 Advent Calendar 2017 17日目の記事になります。

こんにちは。新卒二年目デザイナーのえびといいます。好きな寿司ネタはえんがわです。
主にLIFULL HOME'S新築一戸建てのデザイン・コーディング業務をしています。

最近formを触る機会がありました。
その中でも特に触っていたのがinput・label要素です。
formの中枢を司るinputを影から一生懸命支えるlabel。さながら仲睦まじい夫婦・カップルのようでした。
爆発してほしい。

今回はそんなinputとlabelの関係をお話しつつ破局に導いてみます。

inputとlabel

フォームで散見するcheckboxやradioなどのinput要素。
このまま使うと非常にダサイのですが、label要素を使うことによってCSSで自由にデザインできるようになります。
さながら「仕事は出来るけれどちょっとイケてないinputくんを服屋に連れていくlabelちゃんのようです。

具体的には、inputとlabelを兄弟要素として配置し、inputをdisplay: none;で消します
そして、inputでidと指定されている値をlabelのforに入れてあげると、label要素をinputの代替として使用することができます。
最初に述べたようにlabel要素はCSSが使えるので、デザイン性の高いフォームの作成が可能になります。

レシピは以下になります。
ホバー時・チェック時で何らかの変化があるとより「チェックしている感」が高まりますね。

label+input.html

<input type="checkbox" id="hoge">
<label for="hoge">ラベルテキスト</label>

label+input.css

input[type="checkbox"] {
    display: none;
}
label {
    position: relative; /* 擬似要素用に指定 */
    /* 背景色・ラベルカラー・paddingなどをいい感じに設定 */
}

/* チェックボックスの箱 */
label::before {
    content: "";
    position: absolute; /* 絶対位置で場所を指定 */
    /* width, height, backgroundなどで箱をデザインする */
}

/* チェックマーク */
label::after {
    content: "";
    position: absolute; /* 絶対位置で場所を指定 */
    /* width, height, border, transformなどでチェックマークをデザインする */
    /* 非チェック時の表示なので、opacity: 0;を入れてあげる方がよさそう */
}

/* ホバーした時の挙動 */
label:hover {
}
label:hover::before {
}
label:hover::after {
}

/* チェックした時の挙動 */
input[type="checkbox"]:checked + label {
}
input[type="checkbox"]:checked + label::before {
}
input[type="checkbox"]:checked + label::after {
    /* label::afterでopacity: 0;を指定していたら1にしてあげること */
}

デモ
https://codepen.io/ebisawa-next/pen/rYKzYY

今回は兄弟要素として書きましたが、input ~ labelにすれば間に別の要素が入っていてもOKです。
（まるで遠距離恋愛。爆発してほしい。）

inputはinput、labelはlabelとしてまとめて置いておきたいときはそのように記述しましょう。

input「ごめん…俺…id持ってないんだ…」

inputにidを付与出来ないこと、もしかしたらあるかもしれません。
そんな場合も、label > inputの親子要素にすれば同じように使えます。
まるで不甲斐ない息子を優しくサポートするｶｰﾁｬﾝのようです。

ただ、そのままlabel > inputの親子要素にすると、input:checkedの時の修飾が出来なくなってしまいますので、
以下のようにinput + spanの形にしてあげる必要があります。

label>input.html

<label>
    <input type="checkbox">
    <span>ラベルテキスト</span>
</label>

CSSは上で書いたものを label→spanに置換してあげるだけ。かんたん。

デモ
https://codepen.io/ebisawa-next/pen/eeLxey

inputとlabelを引き裂く

兄弟でも親子でもオールオッケーなinput♡labelですが、
inputだけでも装飾は可能です。labelなんていらなかったんだ！

inputのappearanceとoutlineをnoneにしてあげることで、
デフォルトのinputの設定がリセットされます。

lonelinessInput.css

input[type:checkbox] {
    -webkit-appearance: none; /* webkit系はpfが必要 */
    appearance: none;
    outline: none;
}

あとはlabel(::before, ::after)に指定していた要素をinputにいれてあげればOKです。
ただ、このままだとテキストの設定がうまくいかないので、htmlも少し手直しします。

lonelinessInput.html

<ul>
    <li>
        <input type="checkbox">
        <span>ラベルテキスト</span>
    </li>
</ul>

cssも以下を追記。

lonelinessInput.css

li {
    width: 100px; /* inputの表示領域を担保 */
    position: relative; /* spanのabsolute指定に使う */
}
input[type="checkbox"] + span {
    position: absolute;
    /* top, leftでテキストの位置を調整 */
}

デモ
https://codepen.io/ebisawa-next/pen/zpvRwx

引き裂いたけれど使い勝手はどうなの？

微妙。

span要素をクリックしてもチェック出来ないのでユーザビリティがよろしくない
親要素にwidthの値を決めうちでいれないといけないため、耐久性がダメ
そもそもli要素使えるならlabelでいいじゃん

というわけで、inputだけで生きていくのは無理という結論に落ち着きました。
inputくんにはlabelちゃんが必要です。君たちお似合いだよ……

とはいえ、
「チェックボックスやラジオボタンの見た目を変えたい！テキストなんか使わないよ！」
という場合はinputの装飾だけでそれっぽいものが作れます。
DOM要素を極限まで減らしたい場合は使えるかもしれません。

まとめ

inputとlabelは時と場合によって兄弟・親子で使い分けをしよう
inputだけでも修飾はできるが、テキストを添える場合は微妙

今回はinputとlabelの仲を引き裂いてみたものの、
input♡labelカップルの相性が最高すぎて返り討ちに遭いました。
皆様はこのようなことがないよう、クリスマス前にダメージを食らうのはやめましょう。

もうすぐクリスマスなのでinputとlabelの仲を引き裂いてみた

inputとlabel

input「ごめん…俺…id持ってないんだ…」

inputとlabelを引き裂く

引き裂いたけれど使い勝手はどうなの？

まとめ