Прокладка в пределах входных разрывов ширина 100%

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

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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

С помощью CSS3 вы можете использовать размер окна свойств, чтобы изменить способ расчета браузера с помощью ввода.

  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/

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

Часто забытый calc может прийти на помощь:

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

}

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

Ответ 9

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