使用滚动条在文本区域上的圆角 [英] Rounded corners on a textarea with a scrollbar

问题描述

在我的网站上，我有一个HTML textarea ，其中的框中包含大量文本，因此具有滚动功能.好吧，我想在文本区域上有圆角，但是滚动条看起来很糟糕.

这是我的HTML代码段:

 < textarea只读类="xmlbox">@ Html.DisplayFor(modelItem => item.XMLText)</textarea> 

这是我的CSS代码段:

  .xmlbox {位置:绝对；最高:0;正确:0；底部:0;左:0；z索引:2；保证金:自动；内边距:20px;宽度:60％;高度:50％;边框:6px纯黑色；border-radius:20px/200px;border-color:rgba(0，0，0，0.3);背景: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);不透明度:1；-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity = 0)";过滤器:alpha(opacity = 0);-webkit-transition:不透明度1s缓解，z-index 1s缓解；-moz-transition:不透明度1s缓解，z-index 1s缓解；-ms-transition:不透明度1s缓解，z-index 1s缓解；-o-transition:不透明度1s缓解，z-index 1s缓解；调整大小:无；} 

这是一个

On my website I have a html textarea with a large amount of text in the box so it has a scroll. Well I would like to have rounded corners on my text area, but it looks awful with the scroll bar.

Here is my HTML snippet:

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

Here is my CSS snippet:

.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;
}

Here is a JSFiddle to see what I mean.

Is there a way to push the scroll bar in or maybe shrink it or basically anything to make it look nice?

One thing I saw was this picture:

and I thought this could work, but I had trouble recreating the border in CSS. Any tips or ideas on how to make a scrolling textarea look nice with rounded corners, please let me know! Thanks!

NOTE: This needs to look good in all browsers so refrain from just webkit solutions. If you know the way for all browsers then that is fine. I'm leaning toward sharp inside corner and round outside border, but I'm having trouble reproducing the picture to see if it will work. Or another way is pad the scroll bar to the right? Is that possible?

解决方案

You should be able to achieve something like you want by nesting your textarea within a div using your rounded corner style.

There's an example here:

DIV with rounded corners and internal scrollbars

这篇关于使用滚动条在文本区域上的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！