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

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

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

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

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

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

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

Используя 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/

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

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

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

Одним из вариантов является обернуть 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>

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

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

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

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

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

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

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

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

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

<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%, блокируя его с левой и правой сторон родительского элемента.

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

.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%; 

}

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

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