如何使用内部阴影和滚动条正确设置文本区域的样式

Question

我通过使用以下CSS在我的所有控件,输入和textareas上放置一个内部阴影:

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中,在其他浏览器中类似):

但是有助于将内容与内部阴影分开的填充会破坏滚动条周围的文本区域:

如果我删除填充,文本与阴影重叠,如下所示:

我只能在左侧添加填充,解决与左阴影的重叠但不与顶部阴影重叠,同时使滚动条看起来很好:

我也可以在任何地方添加填充,但在右侧,正确显示文本,但工具栏仍然看起来很奇怪:

有什么方法可以解决这个问题吗？

Answer 1

padding使用标准textarea元素无法使属性仅影响内容而不影响滚动条.为此你可以使用contenteditableDIV.例如,检查这个小提琴: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's 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;
}
?