使用标签元素显示带有内部标签的输入 - 输入宽度超过 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>