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

Я помещаю внутреннюю тень на все мои элементы управления, поля ввода и текстовые поля, используя следующий 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 и аналогичные в других браузерах):

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

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

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

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

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