Отступ внутри полей ввода разрывает ширину 100%


130

Итак, мы знаем, что установка отступа для объекта приводит к изменению его ширины, даже если она установлена ​​явно. Хотя можно оспорить логику этого, это вызывает некоторые проблемы с некоторыми элементами.

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

Взгляните на это: http://sandman.net/test/formcss.html

Для второго входа установлено значение отступа 5 пикселей, что я предпочитаю использовать по умолчанию. Но, к сожалению, это заставляет входные данные увеличиваться на 10 пикселей во всех направлениях, включая добавление 10 пикселей к 100% ширине.

Проблема здесь в том, что я не могу добавить дочерний элемент внутрь ввода, поэтому не могу его исправить. Итак, вопрос:

Есть ли способ добавить отступ внутри ввода, сохраняя при этом ширину 100%? Это должно быть 100%, так как формы будут отображаться с родительскими элементами разной ширины, поэтому я не знаю заранее ширину родительского элемента.


3
См. Stackoverflow.com/questions/628500/…, чтобы узнать, как использовать box-sizingатрибут CSS3
Даниэль ЛеЧеминант

15
Просто хочу сказать, спасибо, что держал страницу с примером все это время. Меня сводит с ума, когда кто-то публикует URL-адрес в вопросе, а он не работает после того, как на ответ дан ответ или они не используют что-то вроде jsfiddle.
Джонатан Дюмен

Относительно использования атрибута размера коробки; у меня была такая же проблема, но с высотой - только установка высоты на 100% означает высоту + граница + заполнение = высота контейнера. Чтобы получить фактическую высоту контейнера, мне просто нужно было использовать box-sizing: content-box.
Skychan

За исключением того, что я только что сказал, не работает в IE. IE11 с box-sizing: content-box вообще не регулирует высоту с помощью height: 100%. Он уважает его с определенной высотой в пикселях. Таким образом, height: 31px без изменения размера окна на 6 пикселей меньше, чем height: 31px + box-sizing: content-box. Но идея состоит в том, чтобы использовать высоту: 100%, поэтому я не беспокоюсь о конкретном размере пикселя!
Skychan

Ответы:


289

Используя CSS3, вы можете использовать свойство box-sizing, чтобы изменить способ вычисления браузером ширины ввода .

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

Вы можете прочитать об этом здесь: http://css-tricks.com/box-sizing/


@ Víctor Dieppa Garriga Спасибо, это отличное решение.
sinanakyazici 02

1
Поддержка следующая: Chrome (любой): размер окна Opera 8.5+: размер окна Firefox (любой): -moz-box-sizing Safari 3: -webkit-box-sizing (без префикса в версиях 5.1+) IE8 +: box -sizing. Также я рекомендую это для принятого ответа, это более элегантное решение.
Baconbeastnz 08

1
Чтобы прояснить поддержку размера коробки в IE, для IE свойство размера коробки зависит от режима документа IE, оно работает в "стандартном режиме IE8" и выше. Таким образом, он будет работать в версии браузера IE8, даже если режим документа - «Стандартный режим IE8». Надеюсь, это поможет
Санджив

Честно говоря, box-sizing: border-box;это первое, о чем я подумал, но у меня это абсолютно не работает. Может, прапрапрадеды display: flex;с этим возятся?
Коди

Похоже, он поддерживается всеми основными браузерами без префикса и был в нескольких версиях: caniuse.com/#feat=css3-boxsizing
Джейсон

7

Я не знаю, насколько он совместим с кросс-браузером (работает в firefox и safari), но вы можете попробовать это решение:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Опубликовал только те значения, которые я изменил)


1
Это вызывает проблемы в IE.
Tarik

Что ж, это меня не сильно удивляет :) Не думайте, что есть простое кроссбраузерное решение без изменения разметки.
michaelk

Хорошо, сейчас я голосую за это решение, поскольку добавление поля: -5px, по-видимому, не является нарушением. Я добавил четвертый ввод на страницу, где он используется, и, похоже, он действительно работает. jigsaw.w3.org/css-validator/…
Sandman

7

Одним из вариантов является обернуть INPUTвDIV имеющий заполнение.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

8
Заполнение контейнера div дает не идентичные результаты с добавлением заполнения в поле ввода.
Felix Fung

Добавьте к тому, что сказал Феликс Фанг - вы теряете возможность щелкнуть мышью в области заполнения и заставить ее фокусировать поле ввода - среди других более заметных проблем. Просто хотел указать на эту менее заметную / известную проблему - она ​​меня бесконечно раздражает при использовании веб-страниц, использующих этот хакерский прием.
eselk

5

Здесь calcна помощь может прийти то, о чем часто забывают :

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Поскольку мы знаем, что заполнение будет увеличивать ширину элемента, мы просто вычитаем заполнение из общей ширины. Он поддерживается всеми основными браузерами, адаптивен и не требует запутанных div-оберток.


4

У меня были проблемы с чем-то похожим на это. У меня есть tds со 100% входами и небольшим отступом. Я скомпенсировал отступ на td следующим образом:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

отступ 8 пикселей, чтобы включить границу и отступ поля ввода / текста. Надеюсь это поможет!


ЭТА методика отлично подходит для выравнивания ширины ячеек, содержащих ввод с заполнением, с ячейками, которые этого не делают. Просто примените padding-right выборочно к любому TD, который содержит ввод шириной 100%.
Себ Барре,

1

Возможно, уберите границу + фон с рамки inputи вместо этого заключите ее в divс рамкой + фон и шириной: 100% и установите маржу на input?


Именно такой хак я сейчас использую для решения этой проблемы, но я бы предпочел использовать границу на входе из «соображений стиля» или еще чего-то. Но да, именно так я и поступаю сейчас, так что это жизнеспособное решение
Sandman

1

Одно из найденных мной решений - абсолютно позиционировать ввод с относительно позиционированным родительским тегом.

<p class="full-width-input">
    <input type="text" class="text />
</p>

Применяем стиль:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

Единственное, о чем следует помнить, - это то, что тегу абзаца требуется установка высоты, поскольку его абсолютно позиционированные дочерние элементы не увеличивают его высоту. Это позволяет избежать необходимости устанавливать width: 100%, блокируя его с левой и правой сторон родительского элемента.


0

Попробуйте использовать проценты для заполнения:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

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


-3

Единственное, что я знаю, чтобы предотвратить это, - это присвоить такие значения 100% -10. Но у него есть некоторые проблемы с совместимостью.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.