web-dev-qa-db-fra.com

Comment réaliser un style "mini" en utilisant Bootstrap (ou straight CSS)?

J'utilise la classe btn-mini de Bootstrap pour les "mini" boutons et je cherche quelque chose d'analogue pour créer un "mini" élément de sélection, où le bouton de sélection (c'est-à-dire la partie sur laquelle vous cliquez pour afficher la liste des options, pas la liste des options proprement dites ) a la même taille et le même style qu’un mini-bouton. 

Lorsque j'applique la classe btn-mini à un élément de sélection, le style de police du bouton de sélection a la même taille qu'un mini-bouton, mais la taille du bouton de sélection lui-même reste inchangée par rapport à la taille par défaut. 

Existe-t-il une autre classe Bootstrap que je devrais utiliser? Ou une autre façon de le faire?

P.S. Je travaille sur OS X Chrome, mais j'espère naturellement qu'il existe une solution compatible avec plusieurs navigateurs.

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

Les 2 dernières règles sont optionnelles, cela va donner à <select> l'apparence de <button>, j'ai aussi ajouté un signe d'insertion. Voir ce violon .

27
Pavlo

Juste au cas où des utilisateurs de Bootstrap 3 rencontreraient cette vieille question, voici la méthode 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">

Cependant, il n'y a pas d'input-xs, vous devrez donc le faire vous-même si vous voulez plus petit.

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

Pour Bootstrap 4, pour définir height, nous pouvons utiliser la classe form-control-sm avec 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

Et pour définir width, il faut utiliser des classes de colonnes de grille comme .col-sm-*, .col-md-*, .col-lg-*, etc.

Alors mettez le code de sélection dans:

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

et cela ressemblera à ceci:

 enter image description here

Vous pouvez appeler le dernier un élément de sélection "mini".

4
Rajkaran Mishra

Ce n'est pas une réponse finale, mais je voulais partager ce que j'ai obtenu jusqu'à présent pour quiconque est curieux de le faire.

Comme suggéré par jackwanders, j'ai créé une classe CSS personnalisée:

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

Ces règles font-size et height donnent plus ou moins à la zone de sélection la même taille qu’un mini-bouton, mais le texte n’est pas parfaitement aligné de la même manière (il est légèrement décalé). Notez que vous devez utiliser height et non line-height pour remplacer une règle height pour certains éléments que Bootstrap définit ailleurs. (La règle width consiste simplement à changer le widget et peut être celle que vous souhaitiez.)

Mon CSS-fu n'est pas assez bon pour rendre rapidement la mini-sélection complètement cohérente avec les mini-boutons, et d'après ce que je vois, la sélection se comporte bizarrement quand il s'agit de CSS, mais j'espère que cela sera utile pour en commencer d'autres . En attendant, toujours ouvert pour de meilleures réponses!

2
Ghopper21

Basé sur la classe btn-xs j'ai préparé ceci:

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

Notez que la largeur n'est pas limitée!

Veuillez vérifier ce violon pour le voir en action.

0
1_bug

Pavlo répond, c'est mieux. Mais quand le curseur de la souris est au dessus de la souris, le clic ne fonctionne pas Une seule chose doit être ajoutée dans la classe caret pour résoudre ce problème:

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

0
EminST