使用標籤元素來顯示帶有內部標籤的輸入 - 輸入寬度超過Firefox中的標籤

Question

我試圖在文本輸入中放置一個跨度，以「$」字符作爲前綴以表示一個美元數量。

爲此，我使用包含「$」跨度的標籤元素以及實際輸入，該輸入設置爲100％寬度。標籤元素的樣式看起來像一個文本框。

這工作正常，在Chrome和IE，但在Firefox似乎在輸入設置寬度爲100％不走跨度考慮，因此延伸經過實際標籤元素的界限：

代碼示例：

.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

不設置min-width:0的輸入，使其佔用通過flex:1所有可用的寬度解決這個問題？

.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

我用另一種方法

.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>