文本框如何实现圆角？

Question

4

请查看附带的图片和 jsfiddle 链接：http://jsfiddle.net/chqy9dja/ 这是一个简单的文本区域，带有圆角。请注意右上角和右下角出现的问题，即滚动条。截图是用 Chrome 拍摄的，但所有其他浏览器都存在此问题。

我知道可以使用 jquery/javascript 插件来解决这个问题，但我正在寻找一种仅使用 CSS 的方法。

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

尝试了这个，目前最好的解决方案：将文本区域包裹在 div 中，样式处理 div。它起作用了，只有在聚焦元素时才会出现轻微问题。

尝试用轮廓线替换边框，并使用 CSS 添加轮廓线偏移量。它很好用，问题是轮廓线不能有圆角。

还有其他的想法吗？请直接在文本区域中添加样式，不要使用包装 div。

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

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

- Malasorte

你试过使用 (overflow:hidden;) 吗？ - Gho

我希望滚动条保持在原位... - Malasorte

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashem Qolami · Accepted Answer

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

例如，你可以给元素设置一个透明的border和一个合适的box-shadow，像这样：

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