bootstrap-select の色を好きな色にカスタマイズ + 年月日を一行で表現

年月日をSelectで選ぶHTMLを書くのに、bootstrap-selectを使ってカスタマイズしようとしたら意外と苦労したので、参考までに。

select-bootstrap >> https://silviomoreto.github.io/bootstrap-select/

特に色を変えるとか考えずにサンプルを参考にして、簡単に書いてみる。
（いちおうbootstrapのグリッドシステムも使ってみる）

<form id="fortuneForm">

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-3 col-sm-offset-1 text-center">
    <select class="selectpicker form-inline" name="year">
        <option value="2016">2016</option>
        ...略...
        <option value="1949">1949</option>
      </select>
     年
    </div>
    
    <div class="col-xs-12 col-sm-3 text-center">
      <select class="selectpicker form-inline" name="month">
         <option value="1">1</option>
         ...略...
         <option value="12">12</option>
      </select>
      月
    </div>

    <div class="col-xs-12 col-sm-3 text-center">
      <select class="selectpicker form-inline" name="day">
          <option value="1">1</option>
          ...略...
          <option value="31">31</option>
      </select>
      日
    </div>
    
    <div class="col-xs-12 col-sm-2 button">    
       <button type="submit" class="btn btn-default">Go!</button>
    </div>
  </div>
</div>

</form>

「form-inline」クラスを使うとselectの隣に文字が並びます。。。一応。。。
結果こんなかんじ。

まぁ見た目はこれでもいいですが、どうにも暗い。。。
カーソルがあわせると灰色とか。。。

というわけで、色を変えます。

.btn-default {
	border: 2px solid #f0828d;
}

.btn-default:hover,
.btn-default:active,
.btn-default:focus,
.btn-default.active:hover,
.btn-default.active:active,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default {
	border: 2px solid #f0828d !important;
	background-color: #FFF !important;
}

.btn-default[type=submit],
.btn-default[type=submit]:hover {
	border: 2px solid #f0828d !important;
	background-color: #f0828d !important;
	color: #FFF;
	box-shadow: 2px 2px 3px 1px #666;
	-moz-box-shadow: 2px 2px 3px 1px #666;
	-webkit-box-shadow: 2px 2px 3px 1px #666;
}

.btn-default[type=submit]:active,
.btn-default[type=submit]:focus {
	border: 2px solid #bc4e59;
	background-color: #bc4e59;
	color: #FFF;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

selectのborderをピンクに、もちろん選択中も。
あと、ボタンに影をつけて、押すと影が消える仕様にしました。

いいかんじです！可愛くなった！

あと、幅が狭くなると文字が改行される問題が出ているので、
selectの幅を変えます。

.bootstrap-select {
	width: 85% !important;
}

といったかんじです。
たかだか、色とレスポンシブに対応させたかっただけなのに、けっこう時間を要してしまいました。
でも、一回作っておくと今後使えそうです。（生年月日選択するページなんてほとんどないけど）