Utilisation d'un élément d'étiquette pour afficher une entrée avec étiquette intérieure - La largeur d'entrée dépasse l'étiquette dans Firefox

Question

J'essaie de placer un span dans une entrée de texte pour le préfixer avec le caractère "$", pour représenter un montant en dollars. Pour ce faire, j'utilise un élément d'étiquette contenant l'intervalle "$" avec l'entrée réelle, qui est définie sur 100% de largeur. L'élément label est conçu pour ressembler à une zone de texte.

Cela fonctionne bien dans Chrome et IE, mais dans Firefox il semble que la mise en largeur de 100% sur l'entrée ne prend pas la portée en considération, et étend donc passé les limites de l'élément d'étiquette réelle:

Exemple de code:

.container { width: 400px; } 
 
.w70 { width: 70px; } 
 

 
.input-with-label { 
 
    border: 1px solid #D9D9D9; 
 
    display: flex; 
 
    align-items: center; 
 
    background-color: #fff; 
 
} 
 

 
.input-with-label.-dollar-amount > input[type='text'] { 
 
    text-align: right; 
 
    font-weight: 600; 
 
    
 
} 
 

 
.input-with-label > input[type='text'] { 
 
    margin: 0; 
 
    border: none; 
 
    width: 100%; 
 
} 
 

 
.input-with-label > .input-label { 
 
    padding-left: 3px; 
 
    font-size: 10px; 
 
    border: none; 
 
}

<div class="container"> 
 
    <label class="input-with-label -dollar-amount w70"> 
 
    <span class="input-label">$</span> 
 
    <input type="text" value="0.00" /> 
 
    </label> 
 
</div>

Answer 1

Ne pas mettre min-width:0 à l'entrée et d'en faire utiliser toute la largeur disponible via flex:1 résoudre le problème?

.container { width: 400px; } 
 
.w70 { width: 70px; } 
 

 
.input-with-label { 
 
    border: 1px solid #D9D9D9; 
 
    display: flex; 
 
    align-items: center; 
 
    background-color: #fff; 
 
} 
 

 
.input-with-label.-dollar-amount > input[type='text'] { 
 
    text-align: right; 
 
    font-weight: 600; 
 
    
 
} 
 

 
.input-with-label > input[type='text'] { 
 
    margin: 0; 
 
    border: none; 
 
    min-width: 0; 
 
    flex: 1; 
 
} 
 

 
.input-with-label > .input-label { 
 
    padding-left: 3px; 
 
    font-size: 10px; 
 
    border: none; 
 
}

<div class="container"> 
 
    <label class="input-with-label -dollar-amount w70"> 
 
    <span class="input-label">$</span> 
 
    <input type="text" value="0.00" /> 
 
    </label> 
 
</div>

Answer 2

J'ai utilisé une autre méthode

.currencyinput span{ 
 
    position: relative; 
 
} 
 
.currencyinput input{ 
 
    padding-left:20px; 
 
} 
 
.currencyinput span{ 
 
left:15px; 
 
top:0 
 
    position: absolute; 
 
} 
 
input{ 
 
border:1px solid lightgray; 
 
line-height:30px; 
 
}

<span class="currencyinput"><span>$</span><input type="text" name="amount"></span>