I'm facing an issue with my website where I have a large amount of text in an html textarea that requires a scroll bar. The problem is, I'd like to add rounded corners to the textarea, but it doesn't look good with the scroll bar.
Below is the HTML snippet I'm using:
<textarea readonly class="xmlbox">
@Html.DisplayFor(modelItem => item.XMLText)
</textarea>
And here is the 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;
}
You can view a demo on JSFiddle to better understand the issue.
I'm looking for suggestions on how to make the scrolling textarea look aesthetically pleasing with rounded corners. Any ideas or tips would be greatly appreciated. Thanks!
NOTE: I need this solution to work across all browsers, so please avoid webkit-specific solutions. If you know of a way that works universally, I'm open to trying it out. My preference is for sharp inside corners and round outside borders, similar to the image I came across. However, I'm struggling to replicate it using CSS. Alternatively, could the scroll bar be padded to the right? Is that feasible?