HTML5 - ввод текста с заполнением слишком широк

Я хочу поле input, которое будет дополнено изнутри. Я переношу на HTML5. У меня это работает в HTML 4.01 Transitional, но в HTML5 поле input начало выходить из рамки таблицы. Можете ли вы помочь мне исправить это для HTML?HTML5 - ввод текста с заполнением слишком широк

часть кода HTML

<td class="content_listing_r" style="width: 80%;"> 
    <input type="text" name="model_search" style="width: 100%; padding: 5px" autocomplete="off" /> 
</td>

Это выглядит следующим образом:

enter image description here

Но следует искать так:

enter image description here

Вот скрипка для вас, чтобы проверить и поиграть с ней: http://jsfiddle.net/kelu/DbXy5/5/

источник

2014-01-07 Kelu Thatsall

padding добавляет дополнительную ширину –

Добавить CSS box-sizing правило вашего поля ввода:

.content_listing_r input { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
}

jsFiddle example

источник

2014-01-07 14:40:38 j08691

Я думаю, что все, я собираюсь проверить это на всех браузерах, спасибо! –

Извините, он не работает на Firefox 26.0 для Linux :( –

Обновлено. Необходимо добавить префикс -moz для FF. – j08691

Добавить дополнение к классу «content_listing_r» вместо области ввода, это добавит прокладки вокруг ячейки.

<td class="content_listing_r" style="width: 80%; padding: 5px;"> 
    <input type="text" name="model_search" style="width: 100%" autocomplete="off" /> 
</td>

С другой стороны, сделать ширину меньше, и добавить отступы в процентах

<td class="content_listing_r" style="width: 80%;"> 
    <input type="text" name="model_search" style="width: 96%; padding: 2%" autocomplete="off" /> 
</td>

источник

2014-01-07 14:38:43

, но увеличит свою ширину –

Эй, спасибо за ваше предложение, но, к сожалению, это не то, что я искал. Это не сделает мое поле ввода больше (текст внутри должен быть дополнен) –

Вы можно использовать удобный calc правило для ширины CSS:

<input type="text" name="model_search" style="width: -webkit-calc(100% - 10px); width: calc(100% - 10px); padding: 5px" autocomplete="off" />

... хотя он может иметь проблемы с совместимостью в менее популярных браузерах

источник

2014-01-07 14:40:49

Эй, ваше решение работает, поэтому я дам ему плюс, но я думаю, что 'box-sizing: border-box' - намного лучший вариант. Также в вашем решении есть проблема, что пространство справа немного меньше, чем должно быть (но приемлемо). –

Я согласен - 'border-box' похоже на путь. –

Использование box-sizing: border-box

<input type="text" name="model_search" style="width: 100%; padding: 5px; box-sizing:border-box" autocomplete="off" />

с приставками поставщика

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

box-sizing : border-box

Дополнение: (Если можно, (Royi))

-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ 
    -moz-box-sizing: border-box; /* Firefox 1+ */ 
      box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */

источник

2014-01-07 14:41:37 Chin

Эй, это тот же ответ, что и j08691, я думаю, и все та же проблема - для Firefox не работает. –

@KeluThatsall Посмотрите версию префикса поставщика для исправления FF – Chin

Спасибо, похоже, сейчас он работает :) –

Если поле ввода находится внутри вещи, то вы можете использовать ширину!

Когда вы добавляете padding, он добавляет немного ширины и высоты бит в зависимости от параметров. Вы используете ширину 100% и добавляете некоторые прокладки. В чем проблема!

Попробуйте это:

width: 96%;

Lessen ширине немного входа, это даст вам элемент, который вы хотите!:)

http://jsfiddle.net/afzaal_ahmad_zeeshan/DbXy5/8/

источник

2014-01-07 14:42:23

Он будет выглядеть по-разному для каждой ширины контейнера - так что это не-нет. Извините –

Try:

.content_listing_r input { 
    box-sizing:border-box; 
    -moz-box-sizing: border-box; 
}

источник

2014-01-07 14:45:16 maurelio79

Обивка добавляет дополнительную ширину, если вы измените

padding:5px;

padding:5px 0;

это будет исправить вашу проблему удаление дополнительная ширина при сохранении верхнего и нижнего отступов.

источник

2014-01-07 14:45:17 serakfalcon

Вы правы, но ваше решение заставит входной текст начинаться только с границы, и я хочу немного пространства между текстом и границей слева. –

HTML5 - ввод текста с заполнением слишком широк

ответ

Смежные вопросы