Html 如何使用内部阴影和滚动条正确设置文本区域的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8895332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly style a text area with inner shadows and scrollbar
提问by pupeno
I'm putting an inner-shadow on all my controls, inputs and textareas by using the following CSS:
我使用以下 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;
}
and, with some other styling, looks like this (in Firefox, and similar in other browsers):
并且，使用其他一些样式，看起来像这样（在 Firefox 中，在其他浏览器中类似）：
But the padding that helps separate the content from the inner shadow breaks the textarea around the scrollbar:
但是有助于将内容与内部阴影分开的填充会破坏滚动条周围的文本区域：
and if I remove the padding, the text overlaps the shadow, like this:
如果我删除填充，文本会与阴影重叠，如下所示：
I can add padding only to the left, solving the overlap with the left shadow but not with the top shadow, while having the scrollbar look good:
我只能在左侧添加填充，解决与左侧阴影而不是顶部阴影的重叠，同时让滚动条看起来不错：
I can also add padding everywhere but on the right side, having the text displayed correctly but the toolbar still looks rather odd:
我还可以在任何地方添加填充，但在右侧，使文本正确显示，但工具栏看起来仍然很奇怪：
Is there any way to solve this?
有没有办法解决这个问题？
采纳答案by techfoobar
Getting the paddingproperty to affect only the content but not the scrollbar is not possible using standard textarea elements. For that you can use a contenteditableDIV. For example, check this fiddle: http://jsfiddle.net/AQjN7/
padding使用标准 textarea 元素无法使属性仅影响内容而不影响滚动条。为此，您可以使用contenteditableDIV。例如，检查这个小提琴：http: //jsfiddle.net/AQjN7/
HTML:
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:
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;
}
?
回答by Tapefreak
Additionally - rather than using simply input, which will target buttons, you can target text inputs specifically with
此外 - 而不是使用简单的输入，它将针对按钮，您可以专门针对文本输入
input[type="text"]
回答by Kyle
You can just add: padding-right: 0;to the textarea selector and it will line up your scrollbar with the side of the element. :)
您只需将：添加padding-right: 0;到 textarea 选择器，它就会将您的滚动条与元素的一侧对齐。:)
回答by timing
You could wrap the textarea in a div:
您可以将 textarea 包装在一个 div 中：
<div class="textarea-wrapper">
<textarea>
</div>
css:
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/
这里有一个 jsFiddle：http: //jsfiddle.net/rXpPy/
