如何设置html输入标签宽度“ fit-content”在CSS中

Question

我的HTML页面中有一个输入标签，如下所示。

我想制作一个输入标签宽度以适合内容和最小宽度。 所以我写了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

这是使用CH的很少使用的单位的好时机，该单元相对于当前字体和字体大小的“ 0”（零）的宽度相关！然后使用JS使宽度等于CH中的输入的长度，我在2个位置，一次加载时完成了此操作，然后在onkeypress上进行。因此编辑时它将扩展。在这里看看：

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

<div class="price-input">
    <input type="text" id="mytxt" onkeypress="this.style.width = (this.value.length) + 'ch';" value="200001230001003002" class="number-input" onload="myFunction()">
    <button onload="myFunction()" class="save"></button>
</div>



<script>
function myFunction() {
  document.getElementById("mytxt").style.width = (mytxt.value.length) + 'ch';
}

window.onload = myFunction();
</script>

Answer 2

你可以这样做。
我发布了两个带有跨度和数据*的解决方案。

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

Answer 3

尝试这个

.number-input {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

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