Как принудительно изменить размер CSS на входном элементе, если указана его ширина?

Question

У меня простая проблема - элемент ввода текста, который указал 2 атрибута CSS, см. Код ниже:

<input type="text" style="resize:horizontal; width:200px" />

Если указан только атрибут resize, размер input можно изменить до любой ширины. Однако, если я указал width, размер элемента input можно изменить только шире, чем 200px, но не короче.

Есть ли способ, как можно указать ширину по умолчанию и в то же время изменить размер элемента ввода на любую ширину? Шире или короче, чем установлено атрибутом width?

Спасибо за любую помощь заранее!

РЕДАКТИРОВАТЬ - уточнение: мне нужно, чтобы размер элемента ввода можно было свободно изменять - на любую ширину - больше 200px и меньше 200px

РЕДАКТИРОВАТЬ 2 - Я предпочтительно ищу чистое решение CSS, если это возможно.

Answer 1

Это довольно близко к работоспособности. Вам нужно установить size="1" в качестве атрибута на <input>, чтобы изменить его размер на очень маленький. Изменение размера контролируется input:active, который переопределяет базовый класс с width: auto;. input:focus предотвращает сжатие при вводе текста.

Потенциальные проблемы: input:focus заставляет <input> указывать min-size, которое может быть больше, чем было изменено. Вы можете min-width: 100% сделать это «функцией» вместо проблемы, предоставляя пользователю больше места для ввода текста. Если <input> имеет фокус, изменение размера все еще ограничено min-width, но изменение размера обычно выполняется после фокусировки (а также, в основном, используется для создания чего-то большего).

Демо: http://jsfiddle.net/ThinkingStiff/jNnCW/

HTML (со встроенными стилями, как вы просили):

<input id="text" type="text" size="1"/>
<style>
    input {
        resize: horizontal;
        width: 200px;
    }

    input:active {
        width: auto;   
    }

    input:focus {
        min-width: 200px;
    }
</style>    

Answer 2

Вот пример использования div с flexbox & contenteditable = true вместо input.Только CSS + HTML.Я нашел это полезным, если тег 'form' не требуется.

#flex {
  display: flex;
  display: -webkit-flex;
  line-height: 30px;
}
#inner {
    padding: 0 20px;
    min-width: 100px;
    height:30px;
    line-height:30px;
    outline:none;
    background-color: #dfd4d7;
}

<div id="flex">Type some text here:
<div id="inner" contenteditable="true" spellcheck="false"><div>
</div>

Answer 3

Все, что я читаю онлайн (см. Ниже), указывает на то, что свойство resize работает только на элементах уровня блока, которые не имеют overflow: visible установленных и на textarea элементах.Технически он даже не работает для input элементов (которые не являются ни тем, ни другим, и даже если для него установлено значение display: block, я не смог получить resize для распознавания Firefox).

Ссылки: https://developer.mozilla.org/en/CSS/resize и http://www.css3.info/preview/resize/ и http://www.w3.org/TR/css3-ui/#resize

Answer 4

Простой способ сделать свободное изменение размера input - установить для него значение width: 100%, а затем поместить его в контейнер inline-block с помощью min-width (min-width устанавливает ширину по умолчанию дляinput).Изменить размер контейнера, чтобы изменить размер input.

См .: http://jsfiddle.net/Wexcode/TvZAr/