如何正确地为内部阴影和滚动条设置文本区域样式 [英] How to properly style a text area with inner shadows and scrollbar

问题描述

我通过使用以下CSS在我的所有控件，输入和textareas放一个内部阴影：

I'm putting an inner-shadow on all my controls, inputs and textareas by using the following 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中，在其他浏览器中）：

and, with some other styling, looks like this (in Firefox, and similar in other browsers):

但是帮助将内容与内部阴影分开的填充打破了滚动条周围的textarea：

But the padding that helps separate the content from the inner shadow breaks the textarea around the scrollbar:

img src =https://i.stack.imgur.com/TNRrK.pngalt =enter image description here>

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

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:

>

我也可以在任何地方添加padding，但是在右边，文本显示正确，但工具栏仍然看起来很奇怪：

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?

推荐答案

获得 padding 但不是滚动条是不可能使用标准textarea元素。为此，您可以使用 contenteditable DIV。例如，检查此小提琴： http://jsfiddle.net/AQjN7/

Getting the padding property to affect only the content but not the scrollbar is not possible using standard textarea elements. For that you can use a contenteditable DIV. For example, check this 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;
}
​

这篇关于如何正确地为内部阴影和滚动条设置文本区域样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！