代码之家 › 专栏 › 技术社区 › Hà Xinh

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

overlay scrollbar select css

Hà Xinh · 技术社区 · 7 年前

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

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/

3 回复 | 直到 7 年前

Chanh Tran 7 年前

我将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>

tao 7 年前

border-radius 在父级上,具有 overflow:hidden height 在父对象上。简言之 <select> 元素很难跨浏览器设置样式。每个选择/下拉库都隐藏了 <选择(>); 并使用更容易设置样式的元素(通常是div和span)绘制代理项,而不是将选择复制到隐藏的 < ,使用JavasScript。

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>

Skribja 7 年前

将相同的边界半径应用于父对象并给出 overflow: hidden 这样地:

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

推荐文章

Ryan Pergent · Firefox scrollTop在添加内容时保持相同的相对位置

7 年前

yossico · Winforms TreeView滚动条不会一直滚动

7 年前

Anu · 泳衣。min.js滚动条:强制滚动条

7 年前

Bilal Sehwail · 统一:隐藏滚动条时禁用滚动拖动

7 年前

user1323 · 滚动条在与交互之前不会采用框架样式

7 年前

Youssef · 边框窗格-JavaFX场景生成器-滚动条向下按钮不可见

7 年前

Crundee MC · 如何删除溢出导致的滚动条?

7 年前

sergi martinez · SWING禁用或隐藏滚动条,但启用控制盘?

7 年前

Kyle Delaney · 在内容的矩形变换被内容大小调整器更新后,如何使Unity Scroll Rect滚动到底部?

7 年前

Alberto Muñoz Sánchez · 禁用文本区域中的垂直滚动条

7 年前