I’ve created a <textarea>
of a fixed size that allows users to scroll within it. The problem is that for some reason the scroll displays above rather than below and inside the edges.
textarea {
width: 40%;
min-width: 40%;
max-width: 40%;
min-height: 120px;
max-height: 120px;
padding: 10px;
resize: none;
display: inline-block;
outline: none;
box-sizing: border-box;
border: solid 5px transparent;
border-radius: 30px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
Any ideas how to make the scroll bars behave more properly? There’s also the issue with padding on the right changing when there’s a scroll bar visible.
PS: This isn’t a duplicate of Rounded corners on a textarea with a scrollbar from six years ago. The question doesn’t have any answers that approach the issue I’m facing. Nesting within a DIV isn’t something that works effectively within the form element. I just wish to have the scroll bar below the border-radius
.
Just to be absolutely clear, I’m looking to do something like this (created in Photoshop as an example)
5
Answers
The initial answer from M.A Shahbazi came closest to solving the question and then did. The answer from Artur helped too. Some of the CSS in that answer is off because you come into an issue with the
<textarea>
not having the same height as its container. Below is the CSS I settled on for anyone who comes across this question in the future and would like to see the final approach. I accepted the answer from M.A Shahbazi because it was closest and needed only a few adjustments. The main ones being the actual sizing, they needed to all have the same size in order to match up. And look more like this: than this:How about using a container for your
textarea
and applying border to that?Edit: After checking your ideal appearance I realized you want the
overflow
of the scrollbar to be hidden, so you can defineoverflow: hidden
on textarea container and get rid ofpadding
by setting it topadding: 0
Just wrap your textarea within a
div
and give some style on into div. Also remove therows
attribute from the textarea. To see the result check my codepen link here.I think the only solution would be to wrap your textarea in container and apply your styles on the container: