如何正确地为文本区域添加内部阴影和滚动条样式

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中，其他浏览器类似）：

但是，在滚动条周围帮助分离内容与内部阴影的填充会破坏文本框：

如果我去掉填充，文本将重叠在阴影上，就像这样：

我可以只在左侧添加填充，解决左侧阴影的重叠问题，但无法解决上方阴影的问题，同时滚动条看起来不错：

我也可以在除右侧以外的所有地方添加填充，使文本正确显示，但工具栏仍然看起来相当奇怪：

有没有办法解决这个问题？

- pupeno

Answer 1

使用标准的textarea元素无法使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;
}
​

- techfoobar

---

我明白了...嗯...在那之前，我应该先决定是否会使用纯文本，或者无论如何都要选择一些富文本编辑器。你知道contenteditable的浏览器支持情况吗？它会在哪里失败？ - pupeno

它在所有现代浏览器中都有相当好的支持，包括FF、Chrome以及IE。然而像IE7这样的浏览器可能会破坏任何东西。 :) - techfoobar

如果您想使用普通的HTML表单发布文本区域数据，则无法发布可编辑内容div中的数据。它将与textarea一起发布。仍然是一个不错的想法。 - timing

您可以通过添加一个隐藏的输入字段，并在提交之前从 div 中复制文本值来实现这一点（即在 onsubmit 返回 true）。 - techfoobar

这个解决方案对我在Mac OS X上的Chrome和Firefox以及IE 9、8、7甚至6都有效。我的意思是，尝试外观和感觉，不确定它是否会弄乱表单。 - pupeno

contenteditable的问题在于你可以将任意格式的HTML复制+粘贴（或选择+拖动）到其中，这有时是一个不错的功能，但如果你想替换一个普通的文本区域，则不是。 - Boann

Answer 2

你可以在文本域选择器中添加 padding-right: 0;，这样它就会与元素的侧边对齐了。 :)

- Kyle

---

如果我这样做，滚动条的顶部和底部仍然不对齐。看起来相当奇怪。 - pupeno

你在那里使用自定义滚动条吗？ - Kyle

不，标准的那个。那是在MacOSX上的Firefox。我会发布另一个屏幕截图。 - pupeno

Answer 3

此外，您可以使用以下代码来针对文本输入框而非按钮进行输入：

而不是仅使用input。

input[type="text"]

- Tapefreak

Answer 4

你可以将文本区域包裹在一个 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;
}

这里是一个 jsFiddle 链接：http://jsfiddle.net/rXpPy/。

- timing

---

我考虑过这个问题，但是在文本区域添加填充会导致文本不重叠阴影，而且也会使滚动条与边框分离。 - pupeno

请查看我在答案中添加的 jsFiddle。 - timing

你使用的是哪个浏览器？我的Ubuntu上的Chrome忽略了滚动条处的填充，但对内容进行了填充。 - timing

哦，不错...在MacOSX上至少在Chrome浏览器中看起来不错。 - pupeno

它在MacOSX的Chrome上可以运行，但在Firefox或IE上不行 :/ - pupeno