css - español - bootstrap tutorial

¿Cómo lograr un estilo de selección "mini" utilizando Bootstrap(o CSS directo)?

Question

Estoy usando la clase btn-mini Bootstrap para los botones "mini" y estoy buscando algo análogo para crear un elemento de selección "mini", donde el botón de selección (es decir, la parte que hace clic para mostrar la lista de opciones, no la lista de opciones en sí) es del mismo tamaño y estilo que un mini botón.

Cuando aplico la clase btn-mini a un elemento de selección, el estilo de fuente del botón de selección tiene el mismo tamaño que un botón de mini, pero el tamaño del botón de selección en sí no se modifica respecto al tamaño predeterminado.

¿Hay alguna clase diferente de Bootstrap que deba usar? ¿O alguna otra forma de hacerlo?

PS Estoy trabajando en OS X Chrome, pero naturalmente espero que haya una solución compatible con todos los navegadores.

Answer 1

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;
}

Las últimas 2 reglas son opcionales, hará que <select> vea como <button> , también le he agregado un símbolo de atención. Ver este fiddle .

Answer 2

Basado en la clase btn-xs he preparado esto:

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

Tenga en cuenta que el ancho no está limitado!

Por favor revise este violín para verlo en acción.

Answer 3

En caso de que algún usuario de Bootstrap 3 se encuentre con esta vieja pregunta, esta es la forma 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">

Sin embargo, no hay input-xs, así que tendrías que hacerlo tú mismo si quisieras más pequeño.

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

Answer 4

Esta no es una respuesta final, pero quería compartir lo que he recibido hasta ahora para cualquier persona que tenga curiosidad por hacer esto.

Como sugirió Jackwanders, seguí adelante y creé una clase CSS personalizada:

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

Estas reglas de font-size y height más o menos hacen que el cuadro de selección tenga el mismo tamaño que un mini botón, pero el texto no está completamente alineado de la misma manera (está ligeramente desplazado hacia arriba). Tenga en cuenta que necesita usar height no height line-height para anular una regla de height para seleccionar elementos que Bootstrap establece en otro lugar. (La regla de width es solo para cambiar el widget y puede ser lo que quieras).

Mi CSS-fu no es lo suficientemente bueno para hacer que la mini selección se vea completamente consistente con los mini botones, y por lo que veo, los select se comportan de forma extraña cuando se trata de CSS de todos modos, pero espero que esto sea útil para otros. . Mientras tanto, sigue abierto a mejores respuestas!

Answer 5

La respuesta de Pavlo es mejor. Pero cuando el cursor del mouse está sobre caret, haga clic en doenst` work. Solo una cosa debe agregarse a la clase de caret para solucionarlo:

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

Answer 6

Para Bootstrap 4 , para establecer la altura podemos usar la clase form-control-sm con 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>

Y para establecer el ancho de estos tenemos que usar clases de columnas de cuadrícula como .col-sm-* , .col-md-* , .col-lg-* , etc.

Así que ponga el código de selección en:

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

y se verá así:

Puede llamar al último elemento de selección "mini" .