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

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

你可以这样做。我发布了两个带有 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; 
}