CSS Содержит текст ввода до 100% ширины
Поэтому, когда я устанавливаю вход как этот пример, текстовое поле, потому что оно имеет границу и дополнение по умолчанию, будет более 200 пикселей.
<div style="width:200px; background-color:red;">
<input type="text" name="fname" style="width:100%;"/>
</div>
Я знаю, что могу заставить текстовое поле соответствовать 200px, установив класс во входной тег и пометив его этим CSS
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Есть ли лучший способ правильно настроить это текстовое поле, т.е. заполнить 100%, как я этого хочу? Я не могу использовать фиксированные размеры. Я использую темы CSS, поэтому заполнение, поля и т.д. Не известны во время компиляции. Они могут быть изменены пользователем на лету. Таким образом, решение должно работать независимо от того, какое значение имеет поле ввода, граница и маржа.
Ответы
Ответ 1
Думаю, вы уже ответили на свой вопрос. box-sizing: border-box;
- действительно единственное средство CSS, позволяющее получить элемент в его родительском элементе. css-трюки подробно рассказывают об этом здесь.
http://css-tricks.com/box-sizing/
Я не знаю ни одного другого CSS, который вы могли бы использовать, кроме использования javascript для выполнения некоторых вычислений, а затем изменения ваших элементов ввода.
Ответ 2
<div style="width:200px; background-color:red;">
<input type="text" name="fname" style="width:100%;border:1px;padding:4px;margin:-5px"/>
</div>
Ответ 3
<div style="width:200px; height:22px; background-color:red;">
<input type="text" name="fname" style="width:97%;margin-left:1%;"/>
</div>
?
Но если серьезно, здесь jsfiddle.
Ответ 4
Да. Вы можете сделать.
Вы можете сделать это, не используя box-sizing
и не чистые решения, такие как width~=99%
.
Демо на jsFiddle:
![enter image description here]()
Разметка HTML:
<div class="input_wrap">
<input type="text" />
</div>
CSS
div {
padding: 6px 17px; /* equal to negative input margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container width */
border: 7px solid #DFDFDF;
padding: 0 10px;
margin: 0 -17px; /* negative margin = border-width + horizontal padding */
}