html - 滚动显示在 css textarea 上方

Question

我创建了一个 <textarea>具有固定大小，允许用户在其中滚动。问题是由于某种原因，滚动显示在边缘上方而不是边缘下方和内部。

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>

有什么想法可以让滚动条的行为更恰当吗？当滚动条可见时，右侧的填充也会发生变化。

PS:这不是 Rounded corners on a textarea with a scrollbar 的副本从六年前。这个问题没有任何答案可以解决我面临的问题。嵌套在 DIV 中并不是在表单元素中有效工作的东西。我只希望滚动条位于 border-radius 下方.

为了绝对清楚，我想做这样的事情(以在 Photoshop 中创建为例)

Answer 1

如何为您的 textarea 使用容器并为其应用边框？

.textarea-container {
    width: 250px;
    height: 300px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
}
textarea {
    width: 100%;
    height: 100%;
    padding: 10px;
    resize: none;
    display: inline-block;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

<div class="textarea-container">
<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 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>
</div>

编辑:在检查了您的理想外观后，我意识到您希望隐藏滚动条的 overflow，因此您可以定义 overflow: hidden 在 textarea 容器上，通过将其设置为 padding: 0

来摆脱 padding