У меня есть следующий фрагмент 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>Почему бы и нет? Забудьте хаки и просто сделайте это с помощью CSS?
Я часто использую:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
См. поддержку браузера здесь.
Ответ на многие проблемы с форматированием 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>давайте рассмотрим окончательный вывод, предоставленный пользователю того, чего мы хотим достичь: текстовая область с отступами и с рамкой, и с отступом, характеристики которых заключаются в том, что при щелчке они передают фокус нашей текстовой области, и преимущество автоматической ширины 100% типично для блочных элементов.
На мой взгляд, наилучшим подходом является использование решений низкого уровня, насколько это возможно, для достижения максимальной поддержки браузеров. В этом случае единственный HTML может работать нормально, избегая использования Javascript (который, так или иначе, мы все любим).
Тег LABEL приходит в нашу помощь, потому что он имеет такое поведение и может содержать элементы ввода, к которым он должен обращаться. Его стиль по умолчанию - стиль встроенных элементов, поэтому, придав метке блочный стиль отображения, мы можем воспользоваться автоматической 100% шириной, включая отступы и границы, в то время как внутренняя текстовая область не имеет границ, нет отступов и ширины 100%..
Взглянув на особенности W3C, мы можем заметить и другие преимущества:
См. особенности 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>Если вы не слишком беспокоитесь о ширине прокладки, это решение фактически сохранит дополнение в процентах.
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Не идеально, но вы получите некоторое отступление, а ширина добавит до 100%, поэтому все хорошее
Я наткнулся на другое решение здесь, которое так просто: добавить 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>
Этот код работает для меня с IE8 и Firefox
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
Вы можете использовать свойство box-sizing, которое поддерживается всеми основными стандартными браузерами и IE8+. Однако вам все равно понадобится обходной путь для IE7. Подробнее здесь.
Нет, вы не можете сделать это с помощью CSS. Именно по этой причине Microsoft первоначально представила другую, а может быть, более практичную модель окна. Модель коробки, которая в конечном итоге выиграла, делает смешением смешение процентов и единиц.
Я не думаю, что вам будет удобно указывать ширину заполнения и ширину границы в процентах от родителя.
Я искал решение для inline-стилей вместо CSS-решения, и это лучшее, что я могу сделать для адаптивной текстовой области:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
Если вы поместите и сметете это так:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
правая сторона текстового поля идеально выравнивается с правой стороной контейнера, а текст внутри текстового поля идеально согласуется с текстом тела в контейнере... а левая часть текстового поля "торчит" немного, это иногда красивее.
Используйте свойство выбора размера окна:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
Это поможет
Для людей, которые используют Bootstrap, textarea.form-control также может привести к проблемам с размером текста. Chrome и Firefox, похоже, используют разные высоты со следующим Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
Я часто исправляю эту проблему с помощью calc(). Вы просто даете textarea ширину 100% и определенное количество отступов, но вы должны вычесть общее левое и правое заполнение ширины 100%, которую вы указали в текстовое поле:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Или, если вы хотите дать textarea границу:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
Как насчет отрицательных полей?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
* {
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>