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

Posted 2023-05-07

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

【英文标题】：How to properly style a text area with inner shadows and scrollbar

【发布时间】：2012-02-12 07:10:01

【问题描述】：

我正在使用以下 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】：

使用标准 textarea 元素无法让padding 属性仅影响内容而不影响滚动条。为此，您可以使用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'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;

​

【讨论】：

我明白了......哦，好吧......在这样做之前，我可能应该决定是否要使用纯文本，或者我是否应该使用一些富文本编辑器。你知道浏览器对 contenteditable 的支持是什么吗？它会在哪里失败？

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

如果你想用普通的html表单发布textarea数据，contenteditable div中的数据将不会被发布。它将带有一个文本区域。还是个不错的主意。

您可以通过添加隐藏输入字段并在提交之前从 div 复制文本值来做到这一点（即 onsubmit 返回 true）。

这个解决方案在 Mac OS X 上的 Chrome 和 Firefox 以及 IE 9、8、7 甚至 6 上都适用于我。我的意思是，尝试外观，不确定它是否搞砸了以表格为例。

【参考方案2】：

您可以在 textarea 选择器中添加：padding-right: 0;，它会将滚动条与元素的一侧对齐。 :)

【讨论】：

如果我这样做，滚动条的顶部和底部仍然没有对齐。看起来很奇怪。

你在使用自定义滚动条吗？

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

【参考方案3】：

您可以将 textarea 包装在 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/

【讨论】：

我想到了，但是会导致文本不与阴影重叠的填充，textarea 上的填充，也会导致滚动条与边框分离。

请查看我添加到答案中的 jsFiddle。

您使用的是哪个浏览器？我在 ubuntu 上的 chrome 忽略了滚动条上的填充，但它确实对内容进行了填充。

哦不错...至少在 MacOSX 的 Chrome 中看起来不错。

嗯，它适用于 MacOSX 的 Chrome，但不适用于 Firefox 或 IE：/

【参考方案4】：

此外，您可以专门针对文本输入，而不是使用简单的输入，这将定位按钮，

input[type="text"]