Тюнинг резинового текстового поля

[Rebulus]

Предложенное Вами решение более элегантное, но отметает IE6-7. Думаю, что IE7 пока стоит брать в расчет. А каши и нелогичности я не вижу, каждый выбирает свой путь в оформлении кода))) Хотя на вкус и цвет приятелей нет.
В Safary 2.0 -webkit-box-sizing не работает.
Кста, ссылка на поддержку свойства box-sizing.

[Rebulus]

1. может пользователи виндовс и динозавры, но есть потребности и должны быть реализации, покрывающие эти потребности.
2. Тем, что не работает, если не задана длина у блока родителя b-input. Это можно посмотреть, собрав предлагаемый html и css из презентации. У меня появляется прокрутка у документа, а это уже плохо.

Пишите в ЛС, буду рад обсудить ваши версии.

[phantasm]

поддерживать safari 2.0 совершенно ни к чему. текущая версия — 5, ещё есть народ на 4-ке и совсем мало — на 3-й версии. такими темпами вы бы ещё Netscape Navigator поддержали…

[Rebulus]

Но если работает без лишнего дополнения кода — это тоже хорошо ;), зачем же отметать получившееся.

[Rebulus]

1. Да нет, я наоборот за светлое будущее, но и за то, чтобы все имели равные возможности.
2. Вот ссылка на метод, который вы предложили. Я собрал все в точности по презентации, только без разделения на файлы. Посмотрите в IE6-7, блок будет со скроллером, а это говорит о том, что содержимое не поместилось в контейнер.

[Rebulus]

Абсолютно нет, это лишь демонстрация, показывающая недочет.

[dfuse]

Если поддержка IE 6-7 не ставится во главу угла, то можно воспользоваться следующей конструкцией:

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;

Демка test.dis.dj/box-sizing/, а также настоятельно рекомендуется почитать www.quirksmode.org/css/box.html

[Yrst]

и внешних отступов (margin)

Margin — это поле, не вводите людей в заблуждение, путаясь в терминологии

[Rebulus]

Поле (в типографии) — отступ от края страницы до содержимого. Соответственно содержимым в данном случае является сам блок, и поле в таком варианте можно называть внешним отступом.

[Rebulus]

Чтобы не вызывать в дальнейшем проблем с формулировкой margin, изменил немного статью

[Latobco]

Если бы все было так же просто с input=file… А то там надо очень извращатся, чтоб изменить стандартный дизайн

[ozoned]

А есть сделать только правый margin для .width-setter, но двойной и с учетом границ поля, тогда можно отказаться от задания высоты, неестественных position и т.п.

<div class='field'>
  <label for='text">Резиновое поле</label>
  <div class='field-wrap' style='margin: 0 20px 0 0'>
    <input type='text' name=«text» id=«text» style='padding: 9px; border: 1px solid #000; background: #fff' />
  </div>
</div>

[velezh]

Opera 11 в первом примере поле «выехало» за пределы блока. Это так нужно?

[velezh]

ах, да точно. извините, проглядел)

[bur_i]

Полученный инпут выглядит как угодно, только не как инпут. Так же за бортом остался селект и текстареа. Статья фигня.

[Rebulus]

Вы еще забыли про input[file] и кнопки, они тоже остались за бортом. Наверное поэтому статья вдвойне фигня)

[dosar]

А мне понравилось. Коротенькая, легко читаемая статья, с готовым, работающим при разных внешних условиях, решением. Спасибо )

[tegrato]

Не хватает информации в статье: Как зафиксировать ширину текстового поля textarea, чтобы мышью нельзя было изменять размер по ширине.