How to set html input tag width "fit-content" in css

user_10247147 0
Viewed 6148

I have an input tag in my HTML page as following.

I want to make an input tag width to fit the content and minimum width. So I wrote CSS as follows.

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

Is it possible to adjust CSS so the input will fit the text width?

I searched already, but the answers use the javascript function.

Please anyone help.

css html javascript
4 Answers

This is a great time to use that rarely used unit of ch which is relative to the width of the "0" (zero) of the current font and font sized used! Then use JS to make the width equal to the length of the input in ch I've done this in 2 places, once when it loads, and then subsequently on the onkeypress so that it will expand when edited. Take a look here:

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

user_111111190

You can do like this. I posted two solution with span and 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; 
}
user_148554880

I think its better to use javascript on such things . you use this code

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

#Tahbaza

user_141288180

try this one

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

user_126353340
Related