圓角到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;
}