Bootstrap - How can I reduce the width of input text (type=number) control to N number of digit spaces

Question

I am looking for a way to reduce the width of a textbox of type number. I would like specify the width of this control on number of digits. For example I would like to have this control 6 digits wide.

Below is my code.

    <div class="col-md-1 px-0 py-0 mx-0 my-0">
        <input id="metric_domain__input__lowerbound__1" class="checkbox form-check form-check-inline input-sm" type="number" filter_controls_div_name="filter_controls__results__coverage__div" metric_domain__checkbox__ordinal_number="1" step="any" placeholder="0.010001">
    </div>

https://jsfiddle.net/allankamau/f3cowebh/1/

Answer 1

if you want the width is dynamically changes by length of the content you need javascript, with note this solution works only when every char is 8px wide and the 18 is for button input number, onkeypress is for input by keyboard and onchange is event for change by input button number:

 <div class="col-md-1 px-0 py-0 mx-0 my-0"> <input id="metric_domain__input__lowerbound__1" class="checkbox form-check form-check-inline input-sm" type="number" filter_controls_div_name="filter_controls__results__coverage__div" metric_domain__checkbox__ordinal_number="1" step="any" placeholder="0.010001" style="width: 26px;" onkeypress="this.style.width = (18 + ((this.value.length + 1) * 8)) + 'px';" onchange="this.style.width = (18 + ((this.value.length + 1) * 8)) + 'px';"> </div>

but if you only need the width not changes you can set it using CSS or using style on your input style="width: 80px;":

 input { width: 80px; }

 <div class="col-md-1 px-0 py-0 mx-0 my-0"> <input id="metric_domain__input__lowerbound__1" class="checkbox form-check form-check-inline input-sm" type="number" filter_controls_div_name="filter_controls__results__coverage__div" metric_domain__checkbox__ordinal_number="1" step="any" placeholder="0.010001"> </div>