WebDesign Dackel

Bootstrap無しでinput-groupを作る

Bootstrap無しでinput-groupを作る

Hatena0
Google+0
Pocket0
Feedly0

バージョン4alphaがリリースされたのが記憶に新しいBootstrapですが、プロトタイプの製作から実際のコーディングまで結構お世話になっています。

特にグリッドとフォーム周りのスタイルは自分で作るのが地味に大変でとても重宝します。

しかし、最近Bootstrapを使っていないサイトで.input-groupみたいなコンポーネントを作る機会が何度かあったので、作り方とポイントを簡単にまとめました。

DEMOページ

DEMOイメージ

DEMOページはこちら

  • 左右

と、それぞれaddonを付けたサンプルです。スタイルも最低限のものですので、必要に応じてスタイルを指定しましょう。

HTMLとCSS

まずはHTMLです。

<!-- addonが左 -->
<div class="input-group">
  <span class="input-group__addon">http://</span>
  <input type="text" class="input-group__control" placeholder="example.com">
</div>

<!-- addonが右 -->
<div class="input-group">
  <input type="text" class="input-group__control" placeholder="30,000">
  <span class="input-group__addon">¥</span>
</div>

<!-- addonを左右に -->
<div class="input-group">
  <span class="input-group__addon">Left</span>
  <input type="text" class="input-group__control" placeholder="Control">
  <span class="input-group__addon">Right</span>
</div>

本家とざっと次のような点が異なります。

  1. クラス名をBEM風に
  2. 入力要素(.form-control)が無い
  3. .input-group-btnとかは省略

2に関して、Bootstrapを使っていないので.input-groupの要素(element)としているためです。


次にCSSです。

.input-group,
.input-group__control,
.input-group__addon {
  box-sizing:border-box;
}

.input-group {
  display:table;
  width:100%;
  border-collapse:separate;
  font-size:14px;
}

.input-group__control,
.input-group__addon {
  display:table-cell;
  height:40px;
  padding:8px 14px;
}

.input-group__control {
  float:left;
  width:100%;
  margin:0;
  border:1px solid #bbb;
  border-radius:0;
  font-size:14px;
  font-family:inherit;
  line-height:1.5;
  -webkit-appearance:none;
          appearance:none;
}

.input-group__addon {
  width:1%;
  border-width:1px 0 1px 1px;
  border-style:solid;
  border-color:#bbb;
  white-space:nowrap;
  vertical-align:middle;
  text-align:center;
  line-height:1;
}

.input-group__control + .input-group__addon {
  border-width:1px 1px 1px 0;
}

CSSのポイントは、display:tabletable-cellで内容に応じてサイズを可変にしておいて、.input-group__addonwidth:1%と最小の幅に設定するところかなと思います。

そうすることで、addonのサイズを固定せず内包するコンテンツのサイズによっていい感じに大きさを合わせてくれるようになります。

CSSをScssで書いた場合

普段使っているのが、Scssなのでこちらも合わせて書いておきたいと思います。
完全に自分用になっちゃいました…!

// Mixinは必要に応じて...
// BEM - Element
@mixin e($name) {
  @at-root &__#{$name} {
    @content;
  }
}

// BEM - Modifier
@mixin m($name) {
  @at-root &--#{$name} {
    @content;
  }
}


// input-group component
.input-group {
  $height:40px;
  $padding:8px 14px;
  $font-size:14px;
  $border-width:1px;
  $border-color:#bbb;

  display:table;
  box-sizing:border-box;
  width:100%;
  border-collapse:separate;
  font-size:$font-size;

  @include e(control) {
    float:left;
    display:table-cell;
    box-sizing:border-box;
    width:100%;
    height:$height;
    margin:0;
    padding:$padding;
    border:$border-width solid $border-color;
    border-radius:0;
    font-size:$font-size;
    font-family:inherit;
    line-height:1.5;
    appearance:none;

    & + .input-group__addon {
      border-width:$border-width $border-width $border-width 0;
    }
  }

  @include e(addon) {
    display:table-cell;
    box-sizing:border-box;
    width:1%;
    height:$height;
    padding:$padding;
    border-width:$border-width 0 $border-width $border-width;
    border-style:solid;
    border-color:$border-color;
    white-space:nowrap;
    vertical-align:middle;
    text-align:center;
    line-height:1;
  }
}

普段あまりやらないですが、変数を要素内に入れちゃいました。

まとめ

こういうHTML/CSSネタは初めてブログに書いたかも。

そして、改めてBootstrapってよく出来てるなぁ〜と関心しました。これ以外にも沢山のノウハウが詰まっていて、参考になるものばかりな気がします。また機会があれば記事にしようと思います。

記事の中ではDEMOページと違って省略しているところがあります。

興味のある方はDEMOページのソースコードを直接確認してみてくださーい!