我有一个多项选择,里面有一些选项。
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>
&#13;
我的偏好是使用默认滚动条并始终显示垂直滚动条。但是我的选择具有border-radius,因此在运行时,垂直滚动条会隐藏选择的右上角和右下角。
这在IE11中运行良好,因为IE11中有足够的空间让滚动条不隐藏角落。但在Chrome中,它会覆盖。
我尝试过:: - webkit-scrollbar但它总是要求我使用我不想要的自定义滚动条。
所以问题是如何在滚动条和边框之间选择空间?
答案 0 :(得分:1)
我将边框设置为父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;
}
&#13;
<div>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
&#13;
答案 1 :(得分:0)
将相同的border-radius应用于父级,并像这样给出overflow: hidden
:
div {
border-radius: 20px;
overflow: hidden;
}
select {
border-radius: 20px;
}
答案 2 :(得分:0)
要隐藏角落,您必须使用border-radius
在父级上设置overflow:hidden
。不要在父母身上设置height
。简而言之,<select>
元素难以跨浏览器设置样式。每个选择/下拉列表都会隐藏<select>
并使用更容易设计样式的元素(通常是div和spans)绘制代理项,然后使用JavasScript将选区复制到隐藏的<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;
}
&#13;
<div>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
&#13;