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

Question

我使用以下 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 中，在其他浏览器中类似):

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

如果我删除填充，文本会覆盖阴影，如下所示:

我可以只在左侧添加填充，解决与左阴影重叠但不与顶部阴影重叠的问题，同时让滚动条看起来不错:

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

有什么办法可以解决吗？

Answer 1

使用标准文本区域元素不可能使 padding 属性只影响内容而不影响滚动条。为此，您可以使用 contenteditable DIV。例如，检查这个 fiddle :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;
}
​