Comment faire pour sélectionner le style avec le style de contrôle de formulaire afin qu'il s'aligne sur la gauche avec une entrée avec un style de contrôle de formulaire?

Question

Je remarque que si j'utilise FlexBox avec un select et input, aussi bien avec le style sous forme de contrôle, qu'ils ne sont pas alignés sur la gauche (j'ai mis ce texte en gras que les gens ne semblent pas comprendre le problème) . Le côté gauche de l'entrée supérieure n'est pas aligné avec le côté gauche de la sélection. Ils s'alignent si je supprime le remplissage de l'entrée.

Modifier: Ce problème apparaît sur Chrome et Safari. Firefox va bien.

Plunker

Markup

<div class="all"> 
    <div class="container"> 
    <label class="label">Input default</label> 
    <input class="input form-control"> 
    </div> 
    <div class="container"> 
    <label class="label">Input no padding</label> 
    <input class="input form-control no-padding"> 
    </div> 
    <div class="container"> 
    <label class="label">Select</label> 
    <select class="input form-control"> 
      <option>Hello</option> 
      <option>World</option> 
     </select> 
    </div> 
</div> 

CSS

.all { 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
} 

.container { 
    display: flex; 
    flex: 1; 
    align-items: center; 
} 

.input { 
    flex: 1 
} 

.label { 
    flex: 1; 
    background: yellow; 
    text-align: right; 
    padding-right: 10px; 
    margin-bottom: 0; 
} 

.no-padding { 
    padding: 0; 
} 

Comment puis-je le style de la sélection uniquement ou utiliser FlexBox afin qu'il soit aligné avec l'entrée?

S'il vous plaît ne pas modifier cette question afin qu'il exécute un extrait de code à moins la sortie est exactement comme le montre l'image.

Answer 1

Veuillez essayer svp.

.all { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 20px; 
 
} 
 
.col-form-label { 
 
    background: yellow; 
 
    text-align: right; 
 
} 
 
.container { 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="all"> 
 
    <div class="container"> 
 
    <div class="form-group row"> 
 
     <label class="col-xs-6 col-form-label">Input default</label> 
 
     <div class="col-xs-6 p-l-0"> 
 
     <input class="input form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label class="col-xs-6 col-form-label">Input no padding </label> 
 
     <div class="col-xs-6 p-l-0"> 
 
     <input class="input form-control"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
    <label class="col-xs-6 col-form-label">Select</label> 
 
    <div class="col-xs-6 p-l-0"> 
 
     <select class="input form-control"> 
 
     <option>Hello</option> 
 
     <option>World</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Vous ne pouvez pas ajouter un rembourrage pour sélectionner l'élément car est généré par l'agent utilisateur de sorte que vous pouvez utiliser pour réinitialiser appearance: none; par défaut du navigateur et ajoutez votre style. Malheureusement pas tout le soutien du navigateur il: https://caniuse.com/#search=appearance

.all { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 20px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
} 
 

 
.input { 
 
    flex: 1 
 
} 
 

 
.label { 
 
    flex: 1; 
 
    background: yellow; 
 
    text-align: right; 
 
    padding-right: 10px; 
 
    margin-bottom: 0; 
 
} 
 

 
.no-padding { 
 
    padding: 0; 
 
} 
 

 
select.form-control { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    padding: 6px 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="all"> 
 
    <div class="container"> 
 
    <label class="label">Input default</label> 
 
    <input class="input form-control"> 
 
    </div> 
 
    <div class="container"> 
 
    <label class="label">Input no padding</label> 
 
    <input class="input form-control no-padding"> 
 
    </div> 
 
    <div class="container"> 
 
    <label class="label">Select</label> 
 
    <select class="input form-control"> 
 
      <option>Hello</option> 
 
      <option>World</option> 
 
     </select> 
 
    </div> 
 
</div>

Answer 3

Une solution est de mettre les différents éléments dans un emballage flexible. This example shows the principle.

Working Plunker

Markup

<div class="all"> 
    <div class="container"> 
    <div class="wrapper"> 
     <label class="label">Input default</label> 
    </div> 
    <div class="wrapper"> 
     <input class="form-control"> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="wrapper"> 
     <label class="label">Select</label> 
    </div> 
    <div class="wrapper"> 
     <select class="form-control"> 
     <option>Hello</option> 
     <option>World</option> 
     </select> 
    </div> 
    </div> 
</div> 

CSS

.all { 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
} 

.container { 
    display: flex; 
    align-items: center; 
} 

.input { 
    flex: 1 
} 

.label { 
    flex: 1; 
    background: yellow; 
    text-align: right; 
    padding-right: 10px; 
    margin-bottom: 0; 
} 

.no-padding { 
    padding: 0; 
} 

.wrapper { 
    display: flex; 
    flex: 1; 
}