How can I make the dropdown portion of a html select scrollable?

Question

How can I make the dropdown portion of a select become scrollable?
I am in a situation where I need to add 74 elements/options to a selection, so I need to be able to scroll in it, since I don't want to reach far down the site.

I have checked many similar questions on stack overflow, however nothing have worked. Is there a way to implement this (without using jquery)?

// Accent 1
var select1 = document.getElementById('1_accent')
select1.onchange = () => {
  // Initial color
  let color1 = 'white'

  // Check background color and change font color accordingly
  if (select1.value == '#fbfbfd') color1 = 'black'
  else if (select1.value == '#fbcd27') color1 = 'black'
  else if (select1.value == '#6be067') color1 = 'black'

  // Add your desired css style here:
  select1.style.cssText = `
background-color: ${select1.value};
color: ${color1};
border: 3px solid #333;
`
}

body {
  font-family: 'Roboto', sans-serif;
}

/* <select> styles */
select {
    /* Reset */
    appearance: none;
    outline: 0;
    font: inherit;

    /* Personalize */
    width: 100%;
    max-width: 100%;
    position: relative;
    color: #fff;
    background-color: #808080;
    font-size: 16px;
    text-align: center;
    height: 50px;
    line-height: 30px;
    display: block;
    cursor: pointer;
    border: 3px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Dropdown option box styling */
select option {
    color: inherit;
    background-color: #A9A9A9;
}

select::-ms-expand {
    display: none;
}

select:hover {
    background-color: #909090;
}

select:focus {
    outline: none;
}

/* Chosen element styling */
option:checked {
    background-color: #888888;
}

.whiteText {
    color: white;
}

.blackText {
    color: black;
    font-weight: bold;
}

.selectionStyle {
    font-weight: 500;
}

<section>
  <select aria-label="First accent color" id="1_accent" class="selectionStyle">
    <option class="whiteText" value="" selected disabled hidden>Choose a color</option>
    <option class="blackText" value="" disabled>eSUN:</option>
    <option class="whiteText" value="#26282f">Black</option>
    <option class="whiteText" value="#fbfbfd">Cold White</option>
    <option class="whiteText" value="#e72e1e">Red</option>
    <option class="whiteText" value="#0b8d6f">Green</option>
    <option class="whiteText" value="#345495">Blue</option>
    <option class="whiteText" value="#5d4088">Purple</option>
    <option class="whiteText" value="#fd6b3e">Orange</option>
    <option class="whiteText" value="#fbcd27">Yellow</option>
    <option class="whiteText" value="#6be067">Peak Green</option>
  </select>
</section>

`