Rounded corners on a textarea with a scrollbar

问题

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: sharp inner corner, round outer

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?

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/17843455/rounded-corners-on-a-textarea-with-a-scrollbar

标签

html

css

scroll

textarea

border