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