Как я могу сделать ширину TextArea 100% без переполнения, когда в CSS присутствует отступ? - PullRequest
Новая
       26

Как я могу сделать ширину TextArea 100% без переполнения, когда в CSS присутствует отступ?

403 голосов
/ 07 ноября 2008

У меня отображается следующий фрагмент кода 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>

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

Ответы [ 15 ]

637 голосов
/ 11 ноября 2010

Почему бы и нет? Забыть хаки и просто сделать это с помощью CSS?

Тот, который я часто использую: 

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

См. Поддержку браузера здесь .

74 голосов
/ 07 ноября 2008

Ответ на многие проблемы с форматированием 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>
19 голосов
/ 23 марта 2010

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

На мой взгляд, лучшим подходом является использование решений низкого уровня, насколько это возможно, для достижения максимальной поддержки браузеров. В этом случае единственный HTML может работать нормально, избегая использования Javascript (который так или иначе мы все любим).

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

Взглянув на особенности W3C, мы можем заметить и другие преимущества:

  • атрибут «for» не требуется: если тег LABEL содержит целевой ввод, он автоматически фокусирует дочерний ввод при нажатии;
  • если внешняя метка для текстовой области уже разработана, никаких конфликтов не возникает, поскольку данный вход может иметь одну или несколько меток.

См. Особенности W3C для получения более подробной информации.

Простой пример: 

<code>
<html>
<head>
<style type="text/css">
.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; }
</style>
</head></p>

<p><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>
</html>

Заполнение и граница элементов .textareaContainer - это те, которые мы хотим дать текстовой области. Попробуйте отредактировать их, чтобы оформить их так, как вы хотите. Я дал большой и видимый отступ и границы для элемента .textareaContainer, чтобы вы могли видеть их поведение при нажатии.

15 голосов
/ 07 ноября 2008

Если вы не слишком беспокоитесь о ширине заполнения, это решение на самом деле также сохранит заполнение в процентах. 

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

Не идеально, но вы получите некоторые отступы, а ширина увеличится до 100%, так что все хорошо

12 голосов
/ 29 июля 2011

Я наткнулся на другое решение здесь , которое настолько просто: добавьте padding-right к контейнеру текстовой области. Это сохраняет поля, границы и отступы для текстовой области, что позволяет избежать проблемы, на которую Бек указал в отношении выделения фокуса, которое хром и сафари помещают вокруг текстовой области.

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

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>
8 голосов
/ 13 ноября 2013

Этот код работает для меня с IE8 и Firefox 

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
5 голосов
/ 25 марта 2010

Вы можете использовать свойство box-sizing, оно поддерживается всеми основными стандартными браузерами и IE8 +. Вам все еще потребуется обходной путь для IE7, хотя. Подробнее здесь .

2 голосов
/ 22 октября 2018

Я искал решение для inline-стилей вместо CSS, и это лучшее, что я могу сделать для отзывчивой текстовой области: 

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>
2 голосов
/ 07 ноября 2008

Нет, вы не можете сделать это с помощью CSS. По этой причине Microsoft изначально представила другую, и, возможно, более практичную коробочную модель . Модель коробки, которая в конечном счете победила, делает непрактичным смешивать проценты и единицы.

Я не думаю, что с вами нормально выражать отступы и ширину границ в процентах от родительского элемента.

1 голос
/ 07 августа 2014

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

textarea.form-conrtol{
    height:auto;
}
Страница:
...