小编Hà *_*inh的帖子

使用 CSS 的垂直滚动条覆盖圆形边框选择

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

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;
}
Run Code Online (Sandbox Code Playgroud)
<div>
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
Run Code Online (Sandbox Code Playgroud)

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

这在 IE11 中运行良好,因为 IE11 中有足够的空间用于滚动条而不是隐藏角落。但在 Chrome 中,它会叠加。

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

所以问题是如何在滚动条和边框之间的选择中留出空间?

https://jsfiddle.net/x2eqqhqy/

css select overlay scrollbar

5
推荐指数
1
解决办法
1260
查看次数

标签 统计

css ×1

overlay ×1

scrollbar ×1

select ×1