圆角到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,如下所示:

这里的例子

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