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

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

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

如果我删除填充，文本会与阴影重叠，如下所示：

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

<图片src="https://i.sstatic.net/ke42O.png" alt="在此处输入图像描述">

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

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

Answer 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;
}
​

Answer 2

您只需将： padding-right: 0; 添加到文本区域选择器，它就会将滚动条与元素的侧面对齐。 :)

Answer 3

您可以将文本区域包装在 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;
}

A jsFiddle here: http://jsfiddle.net/rXpPy/

Answer 4

此外，您可以使用专门针对文本输入的方式，而不是使用简单的输入（以按钮为目标）

input[type="text"]