html - 带有滚动条的文本区域的圆 Angular

Question

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

这是我的 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明白我的意思。

有没有一种方法可以将滚动条插入或缩小，或者基本上可以使滚动条看起来更漂亮？

我看到的一件事是这张图片:

我认为这可行，但我在 CSS 中重新创建边框时遇到了问题。关于如何使滚动文本区域看起来更漂亮的圆 Angular 的任何提示或想法，请告诉我!谢谢!

注意:这需要在所有浏览器中看起来都不错，所以不要只使用 webkit 解决方案。如果您知道所有浏览器的方式，那很好。我倾向于尖锐的内 Angular 和圆形的外边框，但我无法重现图片以查看它是否有效。或者另一种方法是将滚动条向右填充？这可能吗？

Answer 1

您应该能够通过使用圆 Angular 样式将文本区域嵌套在 div 中来实现您想要的效果。

这里有一个例子:

DIV with rounded corners and internal scrollbars