Как сделать TextArea шириной 100% без переполнения, если в CSS есть отступы?
У меня отображается следующий фрагмент 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 шириной родительского элемента?
Ответы 15
Нет, вы не можете сделать это с помощью CSS. По этой причине Microsoft изначально представила другой, возможно, более практичный коробчатая модель. Коробочная модель, которая в конечном итоге победила, делает нецелесообразным смешивание процентов и единиц.
Я не думаю, что с вами нормально выражать ширину отступов и границ в процентах от родительского.
Ответом на многие проблемы с форматированием CSS, кажется, будет «добавить еще один <div>!»
Итак, в этом же духе, пробовали ли вы добавить обертку 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>В итоге я отказался от использования% widths. Я считаю, что ваш подход сработает так же хорошо. Спасибо!
Не забудьте добавить "." в класс textwrapper.
@Chris: Спасибо, исправили. Я слегка удивлен, что кому-то понадобилось почти полтора года, чтобы это уловить ...
Как в этом случае будут выглядеть полосы прокрутки текстового поля?
В Chrome, когда вы фокусируете элемент textarea, он автоматически подсвечивается, и если вы создаете отступ для оболочки div, этот отступ будет видимым, и из-за этого будут видны две границы. Один из hightlighting, а другой из .textwrapper border: 1px solid # 999999;
Я обнаружил проблему при тестировании этого кода, мне пришлось добавить </textarea> вместо <textarea .... />, чтобы он работал правильно.
Если вас не слишком беспокоит ширина заполнения, это решение фактически сохранит заполнение в процентах.
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Не идеально, но вы получите отступы, а ширина в сумме составит 100%, так что все в порядке.
давайте рассмотрим окончательный вывод, представленный пользователю того, чего мы хотим достичь: заполненное текстовое поле как с рамкой, так и с отступом, характеристики которого заключаются в том, что при щелчке они передают фокус нашему текстовому полю, а также преимущество автоматической 100% ширины, типичной для блочных элементов.
На мой взгляд, лучший подход - как можно шире использовать низкоуровневые решения для достижения максимальной поддержки браузерами. В этом случае единственный HTML может работать нормально, избегая использования Javascript (который, во всяком случае, мы все любим).
Тег LABEL приходит в нашу помощь, потому что имеет такое поведение и может содержать элементы ввода, к которым он должен обращаться. Его стиль по умолчанию - это один из встроенных элементов, поэтому, задавая метке стиль отображения блока, мы можем использовать автоматическую 100% ширину, включая отступы и границы, в то время как внутреннее текстовое поле не имеет границ, без отступов и ширину 100%. .
Взглянув на специфику W3C, мы можем заметить следующие преимущества:
- атрибут «for» не требуется: когда тег 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 - это те элементы, которые мы хотим передать текстовому полю. Попробуйте отредактировать их, чтобы оформить как хотите. Я дал элементу .textareaContainer большие и видимые отступы и границы, чтобы вы могли видеть их поведение при нажатии.
Не уверен, какие кроссбраузерные ошибки здесь скрываются, но мне понравился подход. +1
Вы можете использовать свойство box-sizing, оно поддерживается всеми основными стандартными браузерами и IE8 +. Тем не менее, вам все равно понадобится обходной путь для IE7. Узнать больше здесь.
@DavidJohnstone: И поскольку вы больше не разрабатываете сайты для IE7 или старше, это решение :)
Почему бы не забыть о хитростях и просто сделать это с помощью CSS?
Я часто использую:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
См. Поддержку браузера здесь.
Не могу поверить, что это сработало. Но это случилось. CSS никогда не бывает таким простым. :-)
Это должно быть одна из самых крутых вещей, которые я обнаружил за последнее время. Спасибо, есть ли возможность сделать это и в IE7?
Обратите внимание, что вы все равно захотите использовать width: 100% вместе с рамкой.
К сожалению, это не будет работать в более старых версиях IE. Это означает, что вам все равно нужно будет написать код для таблицы стилей IE.
Разве старые версии Internet Explorer не используют только поведение рамки?
По моему опыту, это отключает атрибут rows. Вам также нужно будет установить высоту через CSS.
Также отлично работает для элемента формы. Может сработать и для других.
Также работает с type = 'file'.
может кто-нибудь объяснить это, пожалуйста, куда идет этот класс? div, окружающий текстовое поле?
Это фантастика ... даже спустя столько лет, все равно каждый день узнавать что-то новое. @koolaang в основном говорит, что размер объекта не должен влиять на отступы, поэтому теоретически вы можете применить этот стиль прямо к самому текстовому полю.
Согласен, замечательно, я годами игнорировал многие вещи css 3 из-за необходимости поддерживать, например, 7, но в течение прошлого года или около того я игнорировал их пользователей, которые также формируют ничтожную долю рынка. Я считаю, что лучшее, что вы можете сделать на данный момент с коммерческой точки зрения, - это полностью игнорировать msie 5 6 7 8, я могу сказать по нашей демографической группе, которая старше, что люди в основном перестали использовать msie в целом из-за этих проблем с поддержкой, и это радует технически пользователи. Так что освободи себя, lol, от тирании msie 8-7, вперед, css 3!
Я наткнулся на другое решение здесь, которое так просто: добавить padding-right в контейнер textarea. Это сохраняет поля, границу и отступы в текстовой области, что позволяет избежать проблемы, которую Бек указал на выделение фокуса, которое хром и сафари помещают вокруг текстовой области.
Контейнер 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>
+1 Это будет работать в большем количестве браузеров, чем операторы CSS3. К сожалению, миру по-прежнему нужны div-обертки.
Мне очень нравится этот ответ. Он заставляет текстовое поле соответствовать размерам без каких-либо магических процентных чисел менее 100%. Вы можете использовать отступы со всех сторон в оболочке, чтобы заставить текстовую область перемещаться и оставаться внутри родительской. Минимальная высота и высота также должны составлять 100% обертки. Затем текстовое поле можно установить на 100% с тем же отступом, чтобы все подходило идеально.
Как насчет отрицательной рентабельности?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
Если вы наберете и сместите его следующим образом:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
правая сторона текстового поля идеально выравнивается с правой стороной контейнера, и текст внутри текстового поля идеально выравнивается с основным текстом в контейнере ... а левая сторона текстового поля немного «выступает». иногда бывает красивее.
Этот код у меня работает с IE8 и Firefox
<td>
<textarea style = "width:100%" rows=3 name = "abc">Modify width:% accordingly</textarea>
</td>
Работал и в Chrome.
Используйте свойство размера коробки:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
Это поможет
Для людей, использующих Bootstrap, textarea.form-control также может привести к проблемам с размером текстового поля. Chrome и Firefox, похоже, используют разную высоту со следующим CSS Bootstrap:
textarea.form-conrtol{
height:auto;
}
Я часто исправляю эту проблему с помощью 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;
}
* {
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>Я искал решение для встроенного стиля вместо решения CSS, и это лучшее, что я могу сделать для адаптивного текстового поля:
<div style = "width: 100%; max-width: 500px;">
<textarea style = "width: 100%;"></textarea>
</div>
Да, думаю, это лучшее решение. Спасибо.
У меня это не сработало в последней версии Chrome. Мне пришлось использовать min-width: 100%, чтобы заставить его работать.
@MohanGundlapalli - это простое правило CSS, которое должно работать и для последней версии Chrome. Есть ли другие стили, влияющие на правило width: 100%? возможно, вы можете попробовать проверить его с помощью инструмента разработчика Chrome
Кстати, здесь есть хорошая статья от Джеффри Уэй на tutsplus: net.tutsplus.com/tutorials/html-css-techniques/… Может быть, это кому-то поможет;)