垂直滚动条覆盖圆形边框选择与CSS

Question

我有一个多重选择，里面有一些选项。

select {
  overflow-y:scroll;
  height: 200px;
	border: 1px solid #c4c7cc;
	border-radius: 20px;
	margin: 0;
	padding: 10px;
	color: #323232;
	width: 100%;
	transition: border-color 0.25s ease;
	font-size: 12px;
}

select:not([disabled]):hover,
select:not([disabled]):focus {
	border-color: #ff7900;
}

select[disabled] {
	opacity: 0.5;
}

<div>
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

我的偏好是使用默认滚动条并始终显示垂直滚动条。但是我的选择有边框半径，所以在运行时，垂直滚动条隐藏了选择的右上角和右下角。

这在 IE11 中运行良好，因为 IE11 中有足够的空间让滚动条不隐藏角落。但在 Chrome 中，它会覆盖。

我尝试过 ::-webkit-scrollbar，但它总是要求我使用自定义滚动条，这是我不想要的。

那么问题是如何在滚动条和边框之间留出空间？

https://jsfiddle.net/x2eqqhqy/

Answer 1

要隐藏角落，您必须在父级上设置border-radius，并使用overflow:hidden。不要在父级上设置height。简而言之，<select> 元素很难跨浏览器设置样式。每个选择/下拉库都隐藏了<select>，并使用更易于设置样式的元素（通常是 div 和 span）绘制了一个代理项，然后使用 JavaScript 将选择复制到隐藏的 <select>。

这是最接近您想要的，无需使用插件：

select {
  overflow-y: scroll;
  height: 200px;
  margin: 0;
  padding: 10px;
  color: #323232;
  width: 100%;
  font-size: 12px;
  border-radius: 20px;
  border-color: transparent;
  outline: none;
}

select[disabled] {
  opacity: 0.5;
}

div {
  border: 1px solid #c4c7cc;
  border-radius: 20px;
  transition: border-color 0.25s ease;
  overflow: hidden;
}

div:hover,
div:active {
  border-color: #ff7900;
}

<div>
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Answer 2

我将边框设置为父 div 而不是 select 并得到下面的结果。

div {
  height: 200px;
  border: 1px solid #c4c7cc;
  border-radius: 20px;
  padding: 10px;
  width: 100%;
  transition: border-color 0.25s ease;
}


select {
  height: 200px;
  border:none;
  color: #323232;
  width: 100%;
  font-size: 12px;
}

div:hover{
  border-color: #ff7900;
}

<div>
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Answer 3

将相同的边框半径应用于父级并像这样给出overflow: hidden：

div {
    border-radius: 20px;
    overflow: hidden;
}
select {
    border-radius: 20px;
}