5
votes

Déplacer le libellé de la case à cocher vers la gauche sur la case à cocher personnalisée de bootstrap

J'ai une case à cocher

    <div class="custom-control custom-checkbox custom-control-inline">
         <label class="custom-control-label" for="location2"> Option 2</label>
        <input type="checkbox"  id="location2"  value="location2" name="custom2" class="custom-control-input">
   </div>

Comment déplacer le libellé pour l'afficher à gauche? J'ai essayé de changer l'ordre mais cela casse simplement la fonctionnalité de la case à cocher.

<div class="custom-control custom-checkbox custom-control-inline">
   <input type="checkbox"  id="location"  v-model="checkedLocations"   value="location" name="customRadioInline1" class="custom-control-input">
   <label class="custom-control-label" for="location"> Option 1</label>
</div>

CODEPEN Lien pour afficher les deux exemples

html css bootstrap-4 twitter-bootstrap

0 commentaires

3 Réponses :

8
votes

La case à cocher n'est pas le réel (qui est masqué). Ceci est fait afin de lui donner un style cohérent entre navigateurs et appareils, car ce n'est actuellement pas possible pour .

Au lieu de cela, le :: avant que le pseudo-élément du ne soit utilisé.

Par conséquent, vous devez placer une classe personnalisée sur le wrapper ( custom-control-right dans l'exemple ci-dessous) et ajouter du CSS qui remplace la valeur par défaut:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin:20px;">
    <div class="custom-control custom-checkbox custom-control-inline custom-control-right">
        <input type="checkbox"  id="location"     value="location" name="custom1" class="custom-control-input">
       <label class="custom-control-label" for="location"> Option 1</label>
    </div>
  
    <div class="custom-control custom-checkbox custom-control-inline custom-control-right">
         <input type="checkbox"  id="location2"  value="location2" name="custom2" class="custom-control-input">
        <label class="custom-control-label" for="location2"> Option 2</label>
   </div>
</div>

div.custom-control-right {
  padding-right: 24px;
  padding-left: 0;
  margin-left: 16px;
  margin-right: 0;
}
div.custom-control-right .custom-control-label::before,
div.custom-control-right .custom-control-label::after{
  right: -1.5rem;
  left: initial;
}

Remarque: vous pouvez remplacer le sélecteur div.custom-control-right par .custom-control-right , si ce code est analysé après le chargement de Bootstrap css. Cependant, sur SO, les ressources liées sont chargées après le code dans le panneau CSS et j'ai dû surqualifier le sélecteur pour qu'il fonctionne.

2 commentaires

Mon mauvais, je l'ai seulement testé sur le texte de l'étiquette, pas sur la boîte. J'ai mis à jour avec le sélecteur requis.

Il y a un petit espace entre la case à cocher et l'étiquette qui ne déclenche pas de changement. Mais c'est intentionnel et c'est ainsi que fonctionne l'original. Il est conçu pour que le texte de l'étiquette puisse être sélectionné sans déclencher de modification. J'ai décidé de garder ça. Si vous ne le souhaitez pas, vous devez ajouter un peu de padding-right et une marge tout aussi négative au , de sorte qu'il couvre la case à cocher.

1
votes

Essayez-le: Fiddle

.custom-checkbox {
  padding-left: 0;
}

label.custom-control-label {
  padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
  right: 0;
  left: auto;
}

css :

<div style="margin:20px;">
  <div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" id="location" value="location" name="custom1" class="custom-control-input">
    <label class="custom-control-label" for="location"> Option 1</label>
  </div>

  <div class="custom-control custom-checkbox custom-control-inline">

    <input type="checkbox" id="location2" value="location2" name="custom2" class="custom-control-input">
    <label class="custom-control-label" for="location2"> Option 2</label>
  </div>
</div>

2 commentaires

Notez que cela modifiera toutes les instances de case à cocher personnalisée . Notez qu'il existe des classes spécifiques pour des cas spécifiques (par exemple: custom-control-inline ). La meilleure approche consiste à laisser la fonctionnalité par défaut inchangée, afin qu'elle fonctionne toujours comme prévu et à ajouter de nouvelles fonctionnalités à l'aide d'une classe personnalisée, afin que vous puissiez l'appliquer si nécessaire.

Vous pouvez créer une nouvelle classe et y mettre le CSS ci-dessus. afin que vous puissiez l'utiliser si nécessaire. exemple: jsfiddle.net/abhineetV/mhrgvkbj/3

7
votes

Les réponses ne semblent pas fonctionner avec custom-switch . Voici un exemple pratique.

CSS

<div class="custom-control custom-control-right custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>

HTML

div.custom-control-right {
    padding-right: 24px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
    right: -1.5rem;
    left: auto;
}
div.custom-control-right .custom-control-label::before {
    right: -2.35rem;
    left: auto;
}

0 commentaires