应用border-radius时，无法在Chrome中抓取水平textarea滚动条

Question

https://jsfiddle.net/h4myo11L/4/

<textarea wrap="off" rows="5" style="border-radius: 4px">aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
</textarea>

1. 滚动到文本框的中间
2. 尝试用鼠标抓住水平滚动条
3. 你不能，它是一个文本光标，它在条形图后面闪烁！

删除border-radius样式并重复：现在您可以抓住水平滚动条。滚动到最底部时，它也会开始工作。

在Firefox中运行良好。我使用wrap属性而不是CSS，因为它是唯一的跨浏览器兼容方式，包括IE11（HTML Textarea horizontal scroll）。使用CSS导致在IE11中按下返回键以产生空格而不是换行符。

有没有办法在Chrome中修复此问题？

编辑：Chrome 52中已修复错误

Answer 1

正如我在评论position:relative;中所述，修复了滚动条的问题。

您可以尝试的其他选项是将border设置为无，并使用box-shadow代替相同的效果

我在这个不同的选项中提供了三个例子：https://jsfiddle.net/p6jw6qvf/

#one{
    border: none;
    box-shadow: 0 0 5px 2px #9a9a9a;
}

#two{
    position: relative;
    border-radius: 4px;
}

注意：如果你选择#two选项，这会将滚动条置于顶部并使它们位于边框上方看图像，要解决此问题，您可以使用自定义滚动条将边框半径添加到滚动条本身。

Answer 2

•选项1：

我以前遇到过完全相同的问题而且我提出的解决方案不是最专业的解决方案，但对我来说也是如此。

首先，将 ids: List<number> 打包到 textarea 中并设置为 div 以下属性：

div

然后，从 div { border: 1px solid rgb(169,169,169); /* The default color for the textearea's border */ border-radius: 4px; /* The border-radius you had on the text area */ overflow: hidden; /* To prevent the textarea's edges from overflowing */ display: inline-block; /* To ensure the div's border wraps around the textarea */ } 中删除边框并设置 textarea 以摆脱那种 {{1}存在于 vertical-align: top 的元素中的。像这样：

padding-bottom

正如我在开头所说，我认为这不是一个非常专业的方法，也不是此错误的替代，但结果在视觉上与 display: inline-block <相同/ strong>在你的小提琴里。但是，谨慎使用，因为在某些情况下它可能会出现意外行为。

工作小提琴：→here。

<强>段：

textarea {
    vertical-align: top; /* To remove the small gap that exists in inline-block elements */
    border: 0;    /* To remove the border from the textarea */
}

textarea

•选项2：

经过一些测试后，我发现由于某种原因，将 div { border: 1px solid rgb(169, 169, 169); border-radius: 4px; overflow: none; display: inline-block; } textarea { vertical-align: top; overflow-x: visible; border: 0; } 设置为 <div> <textarea wrap="off" rows="5">aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaabbbbbbbbb IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX. </textarea> </div> 似乎解决问题以及，至少在我的Chrome版本中，但如果您想使用其他类型的定位，以上操作就可以完成。