[css]フォーム用テンプレやらデザイン自作例

毎回打つのめんどい。

前置き
一括
個別
スタイル全解除
radioとcheckbox
textarea
placeholder
選択時の枠線

前置き

form周りのタグをすべて網羅してるわけじゃない。

よく使うやつだけ。

一括

大体親と一緒に指定することになるし、単純に「,」で連結するよりも:is()の方が楽。

:is(input[type="text"],input[type="tel"],input[type="email"],select,textarea){}
:is(input[type="submit"],button[type="submit"]){}

#form内を対象にするとこうなる。

#form :is(input[type="text"],input[type="tel"],input[type="email"],select,textarea){}

:is()内に限ったことじゃないけど、もっと文字数を減らしたいならinputを省略することができる。

:is([type="text"],[type="tel"],[type="email"],select,textarea){}

省略には注意点がある。type=”submit”だけで指定するとinputとbuttonそれぞれ掛かるんで、分かっててやるなら良いけどそうでないなら後でめんどいことになるリスクがある。きちんと指定したい派なので、まとめるにしてもHTMLタグの省略はしたくない。

:is(input[type="submit"],button[type="submit"]){}
[type="submit"]{}

:hoverとかは:is()に対して付けることができる。とても便利。

:is([type="text"],[type="tel"],[type="email"],select,textarea):hover{}

個別

input[type="text"]{}
input[type="tel"]{}
input[type="email"]{}
select{}
textarea{}
input[type="checkbox"]{}
input[type="radio"]{}
input[type="submit"]{}
button[type="submit"]{}

まあそのまんま。

スタイル全解除

select{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

ブラウザとかデバイスごとに標準のデザインがあったりする。基本的にはそれに沿った感じで良いんだけど、iOSに関しては別。特にselectはスタイルの一切を弾くので悪目立ちする。

対策は諸々全部を初期化する他無い。初期化するとselectの端っこの矢印も消える。とんでもなくダルい。

矢印がないとよく分からなくなるんで自前で付けないといけないんだけど、selectに背景画像を載せるか親要素で囲って疑似要素を重ねることになる。

で、背景画像を仕込むなら例えばこんな感じ。

select{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px !important;
    background-repeat: no-repeat;
    background-image: url(矢印の画像);
    background-position: right 10px center;
    background-size: 12px auto;
}

文字とアイコンが被るといけないからpaddingを付ける。

それはいいんだけど、文字が枠をぶち抜いた場合は改行とかせずにはみ出る分はただただ削られる。そもそも仕様だけど、ある意味リスクを高めてる。

うまいことやってください。

radioとcheckbox

組む際、inputとテキストを<label>で囲うのが親切。こうすればテキスト部分をクリックしてもinputが反応する。

<label><input type="checkbox">ああああああ</label>
<label><input type="radio">ああああああ</label>

CSSでの選択時の指定はこう。

input[type="checkbox"]:checked{}
input[type="radio"]:checked{}

なので、チェック部分のデザインを自前で作る場合、例えばこうなる。

<label><input type="checkbox"><span>ああああああ</span></label>
<label><input type="radio"><span>ああああああ</span></label>

:is(input[type="checkbox"],input[type="radio"]){
    display: none;
}
:is(input[type="checkbox"],input[type="radio"]) + span{
    padding-left: 1.5em;
    display: inline-block;
    position: relative;
}
:is(input[type="checkbox"],input[type="radio"]) + span::before{
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: calc(50% - .5em);
}
input[type="checkbox"] + span::before{ background-image: url(非チェックの画像);}
input[type="checkbox"]:checked + span::before{ background-image: url(チェック済の画像);}
input[type="radio"] + span::before{ background-image: url(非チェックの画像);}
input[type="radio"]:checked + span::before{ background-image: url(チェック済の画像);}

都度気になるのはアイコンとテキストのバランスだけど、表示領域（疑似要素）のサイズをemで指定しても中に収まり切るサイズの画像をはめちゃえば問題ないという気付き。拡大縮小が平気な画像ならbackground-size: cover;を入れるのもいいかもしんない。

textarea

高さだけ可変で最小値を指定するのがよく使う形。

textarea{
    resize: vertical;
    min-height: 200px;
}

heightでも高さは決められるけど、狭めた際に限界まで短くなる。そんな事する人はうっかりの操作かわざとなので無視しても良いような気もしなくはないけど、親切ではないかなという感じで。

可変周りのバリエーションはこう。

textarea{
    resize: vertical; /* 幅固定 */
    resize: horizontal; /* 高さ固定 */
    resize: none; /* 完全固定 */
}

placeholder

::placeholder{}
:is(input[type="text"],input[type="tel"],input[type="email"],select,textarea)::placeholder{}

こんな感じ。

選択時の枠線

:is(input[type="text"],input[type="tel"],input[type="email"],select,textarea):focus{
    outline: 1px solid #111;
}

outlineはborderみたいに使う。

outlineはtransitionを聞かせることはできるけど要らないと思う。