Адаптивная ширина ввода css

Question

У меня проблема с вводом текста, его можно сделать адаптивным? Если я добавлю ввод ширины, в левой части будет слишком много ненужного пространства. Опять же, если он недостаточно широк, вы не сможете увидеть весь ввод.

        input[type="text"]{
        max-width: 50px;
        border: none;
        background: transparent;
        font-size: 20px;
        color: whitesmoke;
        padding: 5px;
        font-weight: bold;
        }

<input type="text" id="answer5" disabled="disabled"/>

Есть ли способ сделать область «адаптивной»? Поэтому, если ответ только 1, текст справа ближе к числу, а если ответ длиннее, вы можете увидеть весь ответ.

спасибо

Answer 1

Это можно сделать с помощью гибкого контейнера и flex-grow: 1 для дочернего элемента, который должен занимать максимально доступное пространство.

.container {
  display: flex;
  align-items: center;
}

.container [type="text"] {
  flex-grow: 1;
  margin: 0 .5em;
}

input[type="text"] {
  border: none;
  background: transparent;
  padding: 5px;
  font-weight: bold;
  border: 1px solid #333;
  padding: .5em.75em;
}

<div class="container">
  <label for="textInput" class="first">The following number:</label>
  <input type="text" id="textInput">
  <span class="result">is numeric</span>
</div>

jsFiddle

Answer 2

Вы можете установить ширину по умолчанию, соответствующую ширине в 1 символ (зависит от настроек шрифта). Затем обновляйте информацию при каждом нажатии клавиши:

$(".answer").keypress(function() {
  this.style.width = ((this.value.length + 1) * 12) + 'px';
})

JSFiddle

Если вы не вводите данные в поле вручную, а задаете их с помощью кода, вы можете использовать change. Это будет работать в обеих ситуациях, но будет видно только тогда, когда фокус больше не находится на поле ввода:

$(".answer").change(function() {
    this.style.width = ((this.value.length + 1) * 12) + 'px';
})

Answer 3

не используйте max-width и вместо этого используйте width с процентами или px. это сделает элемент адаптивным.