入力フィールドのスタイル設定のメモ

どんどん種類が増えていくテキストフィールドに対してスタイルを設定するのはナンセンスなので、input, textareaでテキストフィールドのスタイリングをして、その後ろに少数派のチェックボックス・ラジオボタン・ボタンのスタイルを記述していくと良さそげ。少数派のほうはテキストフィールドで設定したスタイルをリセットしないといけないけど、まぁそれは仕方ない。

というわけでSCSSでこんな感じに書くことにした。

@function attr-selectors($tag, $attr, $values) {
  $selector: null;
  @each $value in $values  {
    $selector: "#{$selector}, #{$tag}[#{$attr}=#{$value}]";
  }
  $selector: str-slice($selector, 2);
  @return $selector;
}

@mixin buttons {
  $selector: ".btn, button, #{attr-selectors(input, type, submit button reset)}";
  #{$selector} {
    @content;
  }
}

input, textarea {
  // テキストフィールド
}

input[type=checkbox] {
  // チェックボックス
}

input[type=radio] {
  // ラジオボタン
}

@include buttons {
  // ボタン
}