web-dev-qa-db-ja.com

Bootstrap（またはまっすぐなCSS）を使用して「ミニ」選択スタイルを実現する方法は？

私は「ミニ」ボタンにBootstrapのbtn-miniクラスを使用しており、選択ボタン（つまり、オプションのリストを表示するためにクリックする部分）オプションのリスト自体）は、ミニボタンと同じサイズとスタイルです。

btn-miniクラスを選択要素に適用すると、選択ボタンのフォントスタイルはミニボタンと同じサイズになりますが、選択ボタン自体のサイズはデフォルトのサイズから変更されません。

別のBootstrapクラスを使用する必要がありますか？またはそれを行う別の方法はありますか？

追伸私はOS X Chromeに取り組んでいますが、当然のことながら、クロスブラウザ互換のソリューションがあることを願っています。

csstwitter-bootstraptwitter-bootstrap-2
32
Ghopper21

HTML

<select class="btn btn-mini">
    <!-- options -->
</select>
<span class="caret"></span>

CSS

select.btn-mini {
    height: auto;
    line-height: 14px;
}

/* this is optional (see below) */
select.btn {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
    padding-right: 16px;
}

select.btn-mini + .caret {
    margin-left: -20px;
    margin-top: 9px;
}

最後の2つのルールはオプションであり、<select> のように見える <button>、キャレットも追加しました。これを参照してください fiddle 。

28
Pavlo

Bootstrap 3人のユーザーがこの古い質問に出くわした場合に備えて、BS3の方法を次に示します。

<select class="form-control input-lg"></select>
<select class="form-control"></select>
<select class="form-control input-sm"></select>

<input class="form-control input-lg">
<input class="form-control">
<input class="form-control input-sm">

ただし、input-xはないため、小さくしたい場合は自分で作成する必要があります。

.input-xs, select.input-xs {
  height: 20px;
  line-height: 20px;
}
60
Will Stern

Bootstrap 4の場合、heightを設定するには、form-control-smクラスとform-controlを使用できます。

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

enter image description here

そして、これらのwidthを設定するには、.col-sm-*、.col-md-*、.col-lg-*などのグリッド列クラスを使用する必要があります。

そのため、選択コードを次の場所に配置します。

<div class="row">
  <div class="col-md-3">
    ... select tag code ...
  </div>
</div>

次のようになります。

enter image description here

最後の1つを "mini"select要素と呼ぶことができます。

6
Rajkaran Mishra

これは最終的な答えではありませんが、これまでやってきたことを、これを行うことに興味がある他の人と共有したかったのです。

Jackwandersが提案したように、先に進んでカスタムCSSクラスを作成しました。

.select-mini {
  font-size: 11px;
  height: 20px;
  width: 100px;
}

このfont-sizeルールとheightルールは、選択ボックスをミニボタンとほぼ同じサイズにしますが、テキストは同じように完全に整列しません（わずかに上にシフトします）。 line-heightではなく、heightを使用して、Bootstrap=他の場所で設定する選択要素のheightルールをオーバーライドする必要があります。（widthルールは、ウィジェットを変更し、 ）

私のCSS-fuは、ミニセレクトとミニボタンを完全に一致させるにはすぐに十分ではなく、CSSに関してはセレクトの動作が奇妙に見えるので、これは他の人の出発点として役立つことを願っています。その間、より良い答えにまだ開いています！

2
Ghopper21

に基づく btn-xsこれを用意したクラス：

.input-xs{
    height: 20px;
    line-height: 1.5;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 3px;
}

幅に制限がないことに注意してください！

this fiddle をチェックして、動作を確認してください。

0
1_bug

Pavloの回答の方が優れています。しかし、マウスカーソルがキャレット上にある場合、クリックは機能しません。修正するには、キャレットクラスに1つだけ追加する必要があります。

select.btn-mini + .caret {
    margin-left: -14px;
    margin-top: 19px;
        pointer-events: none;
}
0
EminST