4

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

这是我的 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 中重新创建边框时遇到了麻烦。有关如何使带有圆角的滚动文本区域看起来不错的任何提示或想法，请告诉我！谢谢！

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

4

2 回答 2

4

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

这里有一个例子：

带圆角和内部滚动条的 DIV

于 2013-07-24T19:47:20.770 回答
0

Put the textarea in a div and give it a border-radius and a padding 

<div style="border-radius:10px; border:1px solid #000; padding:20px;">
   <textarea readonly class="xmlbox">
      @Html.DisplayFor(modelItem => item.XMLText)
   </textarea>
</div>
于 2013-07-24T19:49:52.147 回答