Як я можу зробити TextArea на 100% шириною без переповнення, коли в CSS присутній прокладка?

426

У мене відображаються такі фрагменти CSS та HTML.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

Розгорніть фрагмент

Проблема полягає в тому, що область тексту в кінцевому підсумку стає на 8 пікселів ширшою (2 пікселя для облямівки + 6 пікселів для набивання), ніж батьківська. Чи є спосіб продовжувати використовувати облямівку та прокладку, але обмежувати загальний розмір з textareaшириною батьківського?

html css stylesheet

— Ерік Шкуновер
джерело

До речі, для цього є хороша стаття Джефрі Уей на tutsplus: net.tutsplus.com/tutorials/html-css-techniques/… Можливо, це комусь допоможе;)

— Хтось

664

Чому б не забути хаки і просто зробити це з CSS?

Я часто використовую:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Дивіться підтримку браузера тут .

— Піт Біджл
джерело

22

Я не можу повірити, що це спрацювало. Але це було. CSS ніколи не є таким простим. :-)

— Нейт Птах

1

Це має бути однією з найкрутіших речей, яку я знайшов за деякий час. Дякую, будь-який шанс є спосіб це зробити і в IE7?

— Джеремі А. Західний

47

Зауважте, що ви все одно хочете використовувати ширину: 100% у поєднанні з рамкою рамки.

— Тайлер

3

Чи не використовуються в старих версіях Internet Explorer лише поведінку межі?

— Пітер Гедберг

3

хтось може це пояснити, будь ласка, куди йде цей клас? div, що оточує textarea?

— koolaang

81

Відповідь на багато проблем із форматуванням CSS, здається, "додайте ще <div>!"

Отже, в цьому дусі ви спробували додати обгортковий дів, до якого застосовуються рамки / прокладки, а потім помістити текстові області на 100% ширини всередині цього? Щось на кшталт (неперевірене):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

Розгорніть фрагмент

— Дейв Шерохман
джерело

1

Я в кінцевому рахунку відступив від використання% ширини. Я вважаю, що ваш підхід спрацював би так само добре. Дякую!

— Ерік Шкоуновер

5

Не забудьте додати "." до класу textwrapper.

— Кріс Портер

3

@Chris: Дякую та виправляємо. Я м'яко здивований, що комусь це було потрібно майже півтора року

— Дейв Шерохман,

2

Як виглядатимуть смуги прокрутки textarea в цьому випадку?

— Даніель ЛеШемінант

1

При хромуванні, коли ви фокусуєте елемент textarea, він автоматично підсвічується, і якщо ви створюєте набивання для обгортки Div, це накладка буде видно, і через це будуть видні дві межі. Один від підсвічування, а інший - від межі .textwrapper: 1px твердий # 999999;

— Хтось

22

давайте розглянемо кінцевий висновок, що надається користувачеві того, чого ми хочемо досягти: м'які текстові області з окантовкою та оббивкою, характеристики яких полягають у натисканні, передають фокус нашому текстовому району, і перевага автоматичної 100% ширини характерні для блокових елементів.

Найкращий підхід, на мою думку, - максимально використовувати рішення низького рівня, щоб досягти максимальної підтримки браузерів. У цьому випадку єдиний HTML-код може працювати чудово, уникаючи використання Javascript (який ми всі любимо).

Тег LABEL нам допомагає, оскільки має таку поведінку і може містити вхідні елементи, до яких він повинен звертатися. Її стиль за замовчуванням - це стиль вбудованих елементів, тому, надаючи етикетці стиль відображення блоку, ми можемо скористатися автоматичною 100% -ною шириною, включаючи прокладки та рамки, тоді як внутрішня текстова область не має меж, немає прокладки та 100% -ної ширини. .

Ознайомившись зі специфікою W3C, ми можемо помітити:

атрибут "для" не потрібен: коли тег LABEL містить цільовий вхід, він автоматично фокусує дочірнє введення при натисканні;
якщо зовнішня мітка для текстової області вже була розроблена, конфліктів не виникає, оскільки даний вхід може мати одну або більше міток.

Детальнішу інформацію див. У специфікаціях W3C .

Простий приклад:

.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }

<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>

Розгорніть фрагмент

Прокладки та межі елементів .textareaContainer - це те, що ми хочемо надати textarea. Спробуйте відредагувати їх так, як ви хочете. Я надав великі і видимі прокладки та рамки елементу .textareaContainer, щоб ви могли бачити їх поведінку при натисканні.

— Емануель Дель Гранде
джерело

Не впевнений, що тут ховається крос-браузер, але мені подобався підхід. +1

— HRJ

15

Якщо ви не надто турбуєтеся про ширину прокладки, це рішення насправді буде тримати оббивку у відсотках ..

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Не ідеально, але ви отримаєте трохи підкладки, а ширина додає до 100%, тому все це добре

— qui
джерело

12

Я натрапив на інше рішення тут , що це так просто: додати відступ-право контейнера TEXTAREA в. Це забезпечує збереження поля, облямівки та прокладки на текстарі, що дозволяє уникнути проблеми, на яку Бек вказував щодо фокусу, який хромують і сафарі ставлять навколо текста.

Права набивка контейнера повинна бути сумою ефективного поля, облямівки та прокладки з обох сторін текстової області, плюс будь-яке прокладка, яке ви в іншому випадку можете захотіти. Отже, для випадку в оригінальному запитанні:

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>

— Брайан
джерело

1

+1 Це буде працювати в більш браузерах, ніж у CSS3-операторах. Прикрою правдою є те, що світові ще потрібні обгортки.

— BenSwayne

Мені дуже подобається ця відповідь. Це робить текстовий блок просто підходящим без будь-яких магічних відсоткових чисел менше 100%. Ви можете використовувати набивання з усіх боків у обгортці, щоб змусити область тексту просуватися і залишатися всередині батьків. Мінімальна висота та висота також повинні бути 100% на обгортці. Потім текстові області можна встановити на 100% за допомогою тих же накладок, щоб усе ідеально підходило.

— justdan23

9

Цей код працює для мене з IE8 та Firefox

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

— Джефф Гість
джерело

Працював і в Chrome.

— Саньєєв

5

Ви можете скористатися властивістю розміру коробки, підтримується всіма основними браузерами, сумісними зі стандартами, та IE8 +. Вам все одно знадобиться вирішення IE7. Детальніше читайте тут .

— jzfgo
джерело

@DavidJohnstone: А оскільки ви вже не розробляєте сайти для IE7 або старіших версій, це рішення :)

— Jonatan Littke

2

Ні, ви не можете цього зробити з CSS. Саме тому Microsoft спочатку представила іншу, а може і більш практичну модель коробки . Модель коробки, яка в підсумку виграла, робить непрактичним змішувати відсотки та одиниці.

Я не думаю, що з вами нормально виражати прокладки та ширину меж у відсотках від батьківських.

— буті-окса
джерело

2

Я шукав рішення для вбудованого стилю замість рішення CSS, і це найкраще, що я можу запропонувати для гнучкої текстової області:

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

— Джи Мок
джерело

1

Якщо ви прокладете та змістите його так:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

права частина текстової області ідеально вирівнюється з правою стороною контейнера, а текст всередині текстової області ідеально вирівнюється з текстом тіла в контейнері ..., а ліва частина текстової області трохи "стирчить". іноді красивіше.

— звичайний
джерело

1

Використовувати властивість розміру поля :

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

Це допоможе

— user3074446
джерело

1

Для людей, які використовують Bootstrap, textarea.form-control також може призвести до проблем із розміром текстових областей. Схоже, Chrome і Firefox використовують різні висоти за допомогою наступного завантажувального CSS:

textarea.form-conrtol{
    height:auto;
}

— Gwi7d31
джерело

1

Я часто вирішую цю проблему calc(). Ви просто надаєте текстовій області шириною 100% і певною кількістю прокладки, але ви повинні відняти загальну ліву і праву накладки на 100% ширину, яку ви надали текстовій області:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

Або якщо ви хочете надати текстовій області межу:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}

— Джероен Беллеманс
джерело

0

Як щодо негативної маржі?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

— меуструс
джерело

0

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>

Розгорніть фрагмент

— антелове
джерело