使用label元素显示带有内部标签的输入 - 输入宽度超过Firefox中的标签

Question

我试图在文本输入中添加一个范围，以前缀为＆＃34; $＆＃34;字符，代表美元金额。

为此，我使用了包含＆＃34; $＆＃34;的标签元素。跨度与实际输入一起设置为100％宽度。标签元素的样式看起来像文本框。

这在Chrome和IE中运行良好，但在Firefox中，似乎在输入上设置100％宽度并不考虑跨度，因此延伸到实际标签元素的边界：

代码示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我使用了另一种方法

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

Answer 2

是否未将min-width:0设置为输入并通过flex:1使用所有可用宽度来解决问题？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;