Vertical sketch of a rounded border scroll bar using CSS

Question

I have one multiple choice 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>

Run codeHide result

My preference is to use the default scroll bar and always show a vertical scroll bar. But my choice has a border radius, so when working, the vertical scrollbar hides the upper right and lower right corners.

This works well in IE11, because in IE11 there is enough space for a scrollbar that doesn't hide corners. But in Chrome, it overlaps.

I tried :: - webkit-scrollbar, but it always asked me to use a custom scroll bar, which I don't want.

So the question is, how do you make a space in the choice between the scrollbar and the border?

https://jsfiddle.net/x2eqqhqy/

Answer 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;
}

<div>
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Hide result

Answer 2

parent overflow: hidden :

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

Answer 3

, border-radius , overflow:hidden. height . , <select> -. / <select> , ( , divs spans), <select>, 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>

Hide result