垂直滚动条覆盖带CSS的圆边选择

2023年4月12日 137次阅读

我有一个多选项,里面有一些选项.

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>

我的偏好是使用默认滚动条并始终显示垂直滚动条.但我的选择有border-radius,因此在运行时,垂直滚动条会隐藏select的右上角和右下角.

这在IE11中效果很好,因为IE11中有足够的空间让滚动条不隐藏角落.但在Chrome中,它会覆盖.

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

所以问题是如何在滚动条和边框之间选择空间？

https://jsfiddle.net/x2eqqhqy/

最佳答案 我将border设置为父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>
点赞