Vertical scrollbar overlay round-bordered select with 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>