圆角到textarea

Question

请参阅附图和jsfiddle：http://jsfiddle.net/chqy9dja/

简单的textarea，圆角。注意滚动条出现的右上角和右下角的问题。屏幕截图是使用Chrome浏览器拍摄的，但所有其他浏览器都会分享此错误。

我知道这可以通过jquery / javascript插件修复，但我正在寻找一种仅限css的方法。

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

试过这个，到目前为止最好的解决方案：将textarea包装在div中，改为设置div。工作时，只关注元素时出现小问题。

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

还有其他想法吗？直接在textarea上设置样式，而不是包装div。

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

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

Answer 1

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

例如，您可以为元素指定transparent边框和正确的box-shadow，如下所示：

<强> Example Here

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