Как правильно создать текстовую область с внутренними тенями и полосой прокрутки

Я помещаю внутреннюю тень на все мои элементы управления, входы и текстовые поля, используя следующий CSS:

input {
  padding: 7px;
  -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
  -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
  box-shadow: inset 2px 2px 2px 0px #dddddd;
}

и, с некоторым другим стилем, выглядит так (в Firefox и аналогично в других браузерах):

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

и если я удалю прописку, текст перекрывает тень, например:

Я могу добавить прописью только влево, решая перекрытие с левой тенью, но не с верхней тень, при этом прокрутка выглядит хорошо:

Я также могу добавлять дополнения везде, но с правой стороны, правильно отображая текст, но панель инструментов по-прежнему выглядит довольно странно:

Есть ли способ решить это?

Ответ 1

Получение свойства padding для воздействия только на контент, но не на полосу прокрутки невозможно с помощью стандартных элементов textarea. Для этого вы можете использовать contenteditable DIV. Например, проверьте эту скрипту: http://jsfiddle.net/AQjN7/

HTML:

<div class="outer" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

CSS

.outer {
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
    box-shadow: inset 2px 2px 2px 0px #dddddd;
    height: 200px;
    margin: 10px;
    overflow: auto;
    padding: 7px 10px;
    width: 300px;    
    font-family: tahoma;
    font-size: 13px;
    border: 1px solid #aaa;
}

Ответ 2

Вы можете просто добавить: padding-right: 0; в селектор textarea, и он будет выравнивать вашу полосу прокрутки со стороной элемента.:)

Ответ 3

Вы можете обернуть текстовое поле в div:

<div class="textarea-wrapper">
    <textarea>
</div>

CSS

.textarea-wrapper{
    box-shadow: inset 2px 2px 2px 0px #ddd;
}
textarea {
    padding: 10px;
    background: transparent;
    border: none;
}

A jsFiddle здесь: http://jsfiddle.net/rXpPy/

Ответ 4

Кроме того, вместо использования простого ввода, который будет нажимать кнопки, вы можете ориентировать текстовые входы с помощью

input[type="text"]