javascript - 如何在css中设置html输入标签宽度 "fit-content"

Question

我的 HTML 页面中有一个 input 标签，如下所示。
我想制作一个输入标签宽度以适应内容和最小宽度。
所以我写了CSS如下。

.number-input {
  width: fit-content;
  min-width: 120px;
}

<div class="price-input">
  <input type="text" value="200001230001003002" class="number-input">
  <button class="save"></button>
</div>

是否可以调整 CSS 以便输入适合文本宽度？
我已经搜索过了，但答案使用了 javascript 函数。
请任何人帮忙。

Answer 1

你可以这样做。
我发布了两个带有 span 和 data-* 的解决方案。
html

    <p>solution with span <span class="number-input" role="textbox" contenteditable>200001230001003002</span></p>
    
    <p>Solution with data-*<label class="input-sizer" data-value="200001230001003002">
        <input class="number-input1" type="text" oninput="this.parentNode.dataset.value = this.value" size="1" value="200001230001003002">
    </label></p>
    <button class="save"></button>

-css

.number-input {
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
}

.number-input1{
  font-family: inherit;
  font-size: inherit;
}

.input-sizer {
  display: inline-grid;
  vertical-align: top;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  font-family: inherit;
  font-size: inherit;
}  

.input-sizer::after 
{
    content: attr(data-value) "  ";
    visibility: hidden;
    font-family: inherit;
    font-size: inherit;
    white-space: pre-wrap; 
}