Vertical scrollbar overlay round-bordered select with CSS - css

Question

I have one multiple select with some options inside.
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>
My preference is to use default scrollbar and always show vertical scrollbar. But my select has border-radius so when running, the vertical scrollbar hides select's top-right and bottom-right corner.
This works well in IE11 because there is enough space in IE11 for the scrollbar not hiding the corners. But in Chrome, it overlays.
I have tried ::-webkit-scrollbar but it always ask me to use customized scrollbar, which I don't want.
So the question is how to make space in select between scrollbar and the border?
https://jsfiddle.net/x2eqqhqy/

Answer 1

I set border to the parent div instead of select and get the result below.
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 2

To hide the corners you must set border-radius on parent, with overflow:hidden. Don't set height on parent. In short, <select> elements are difficult to style cross-browser. Every single select/dropdown library hides the <select> and draws a surrogate using easier to style elements (typically divs and spans) and than copies the selection to the hidden <select>, using JavasScript.
Here's the closest to what you want, without using a plugin:
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 3

Apply same border-radius to parent and give overflow: hidden like this:
div {
border-radius: 20px;
overflow: hidden;
}
select {
border-radius: 20px;
}