Как добавить добавление в текстовое поле, не увеличивая ширину?

У меня возникли проблемы с настройкой ширины элемента textarea и использованием прокладки через CSS. Значение padding, по-видимому, изменяет ширину текстового поля, что я бы предпочел не делать.

Это мой HTML-код:

<div id="body">
    <textarea id="editor"></textarea>
</div>

И мой код CSS:

#body {
    height:100%;
    width:100%;
    display:block;
}

#editor {
    height:100%;
    width:100%;
    display:block;
    padding-left:350px;
    padding-right:350px;
}

Однако значения заполнения не работают так, как можно было бы ожидать. Ширина текстового поля увеличивается на 350 пикселей в обоих направлениях, вместо того, чтобы определять пространство между границами элемента и его содержимым.

Я рассмотрел только центрирование текстового поля, установив поля в "0px auto", но я бы хотел, чтобы пользователь все еще мог прокручивать текстовое поле, если мышь витает над одним из пустых полей. По той же причине я не могу добавить еще один div для работы в качестве обертки, так как пользователь не сможет прокручивать по пустым областям, но только по полям без полей.

Помогает ли кто-нибудь?

Ответ 1

CSS box model определяет ширину в качестве ширины содержимого, за исключением границы, отступов и полей.

К счастью, у CSS3 есть новое свойство box-sizing, которое позволяет вам изменить это поведение, вместо этого введите прописку и т.д. в указанной ширине, используя:

box-sizing: border-box;

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

Ответ 2

Указание ширины и полей/отступов в '%' помогает. Вот один пример -

Live @http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body {
  background-color:#ccc;
  height:100%;
  width:100%;
  display:block;
}

textarea#editor {
  border:none;
  width:80%;
  height:100%;
  margin-left:10%;
  margin-right:10%;
}

Ответ 3

Ширина, указанная в CSS, не включает заполнение или границу (в соответствии со спецификациями W3C). Я предполагаю, что один из способов сделать это с помощью некоторого JavaScript, который устанавливает ширину #editor в ширину #body минус 700px, но это немного беспорядочно... Не уверен, есть ли способ CSS делать то, что вы хотите здесь. Конечно, вы можете использовать маржу, затем зарегистрировать событие onMouseWheel на #body и работать с этим...

Ответ 4

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

::-webkit-input-placeholder { /* WebKit browsers */
    padding: 5px 0 0 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    padding: 5px 0 0 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    padding: 5px 0 0 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    padding: 5px 0 0 5px;
}