Прокладка всередині входів розбиває ширину 100%

Гаразд, тому ми знаємо, що встановлення накладки на об'єкт призводить до зміни його ширини, навіть якщо воно встановлено явно. Хоча можна стверджувати логіку цього, це спричиняє деякі проблеми з деякими елементами.

У більшості випадків ви просто додаєте дочірній елемент і додаєте до нього накладки замість одного, встановленого на 100%, але для введення форми це не можливий крок.

Погляньте на це: http://sandman.net/test/formcss.html

На другому вході встановлено 5px, що я дуже віддаю перевагу типовим параметрам. Але, на жаль, це змушує вхід зростати на 10 пікселів у всіх напрямках, включаючи додавання 10 пікселів до 100% ширини.

Проблема тут полягає в тому, що я не можу додати дочірній елемент всередину вводу, тому не можу його виправити. Тож питання:

Чи є спосіб додати прокладки всередині входу, зберігаючи ширину 100%? Це має бути на 100%, оскільки форми відображатимуться у батьків різної ширини, тому я заздалегідь не знаю ширини батьків.

За допомогою 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/

Я не знаю, наскільки це сумісний веб-браузер (він працює у 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;
}

Оскільки ми знаємо, що прокладка додасть ширині елемента, ми просто віднімаємо оббивку від загальної ширини. Він підтримується всіма основними браузерами, чуйний і не потребує брудних заголовків.

У мене виникли проблеми з чимось подібним до цього. У мене є 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. Але це має деякі проблеми сумісності.