圆角到文本区域答案

【问题标题】：Rounded corners to a textarea圆角到文本区域
【发布时间】：2014-10-09 07:10:11
【问题描述】：

一个简单的文本区域，带有圆角。请注意出现滚动条的右上角和右下角的问题。屏幕截图是用 Chrome 截取的，但所有其他浏览器都有这个错误。

我知道这可以通过 jquery/javascript 插件解决，但我正在寻找一种仅使用 css 的方法。

我只需要在滚动条和边框之间添加一些填充。

试过这个，迄今为止最好的解决方案：将 textarea 包装在一个 div 中，改为设置 div 的样式。有效，只在关注元素时出现小问题。

尝试用轮廓替换边框，并使用 css 添加轮廓偏移。效果很好，问题是轮廓不能有圆角..

请问还有什么想法吗？直接在 textarea 上设置样式，而不是包装 div。

<textarea id="a" class="a" />

.a {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    border: 1px solid #000;
}

【问题讨论】：

标签： html css

【解决方案1】：

正如你提到的，outline 不能有圆角。一种选择是使用border 和box-shadow 的组合。

例如，您可以给元素一个transparent 边框和一个适当的box-shadow，如下所示：

textarea {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 0 0 3px #000;
    border: 5px solid transparent;
}

【讨论】：