Question

在我的网站上，我有一个html textarea，框中有大量文字，因此它有一个滚动条。好吧，我想在我的文本区域有圆角，但滚动条看起来很糟糕。

这是我的HTML代码段：

    <textarea readonly class="xmlbox">
        @Html.DisplayFor(modelItem => item.XMLText)
    </textarea>

这是我的CSS片段：

.xmlbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    margin: auto;
    padding: 20px;
    width: 60%;
    height: 50%;
    border: 6px solid black;
    border-radius: 20px/200px;
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: opacity 1s ease, z-index 1s ease;
    -moz-transition: opacity 1s ease, z-index 1s ease;
    -ms-transition: opacity 1s ease, z-index 1s ease;
    -o-transition: opacity 1s ease, z-index 1s ease;
    resize: none;
}

这是一个JSFiddle，看看我的意思。

有没有办法推动滚动条或者可能缩小它或基本上任何东西使它看起来不错？

我看到的一件事是这张照片： sharp inner corner, round outer

我认为这可行，但我在CSS中重新创建边框时遇到了麻烦。有关如何使用圆角的滚动文本区域的任何提示或想法，请告诉我！谢谢！

注意：这需要在所有浏览器中都很好看，所以不要只使用webkit解决方案。如果你知道所有浏览器的方式，那就没问题了。我倾向于尖锐的内角和圆形的外边界，但我很难再现图片，看它是否会起作用。或者另一种方法是将滚动条填充到右侧？这可能吗？

Answer 1

您应该能够通过使用圆角样式将textarea嵌套在div中来实现您想要的效果。

这里有一个例子：

DIV with rounded corners and internal scrollbars

Answer 2

将textarea放入div中，并为其赋予border-radius和padding

<div style="border-radius:10px; border:1px solid #000; padding:20px;">
   <textarea readonly class="xmlbox">
      @Html.DisplayFor(modelItem => item.XMLText)
   </textarea>
</div>

带有滚动条的textarea上的圆角

2 个答案: