Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

本記事は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カップルの相性が最高すぎて返り討ちに遭いました。
皆様はこのようなことがないよう、クリスマス前にダメージを食らうのはやめましょう。

ebim
新卒Webデザイナーからフロントエンドエンジニアに転向した人です。 好きな寿司ネタはえんがわです。
lifull
日本最大級の不動産・住宅情報サイト「LIFULL HOME'S」を始め、人々の生活に寄り添う様々な情報サービス事業を展開しています。
https://lifull.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした