How to reduce the height of select dropdown box

Question

I'm having an issue with the select html tag. I have a project when I have a list that is too large, with so many elements. The problem is that I want to shrink the height of the dropdown box and I don't know how to do it.

Here is what happens when I click the select tag:

I want it to be smaller, like, show 10 elements at the time.

Here is my html:

 .selectWrapper, .selectBrand { width: 60%; display: grid; grid-template-areas: "select"; align-items: center; &::after { content: ''; clip-path: polygon(100% 0%, 0 0%, 50% 100%); width: 0.8em; height: 0.5em; grid-area: select; justify-self: end; margin-right: 1em; background-color: #110F30; pointer-events: none; transition: transform 0.2s ease-out; } &:focus-within { &::after { transform: rotate(180deg); } } select { appearance: none; width: 100%; height: 3em; border-radius: 50px; border: none; outline: none; padding-inline: 1em; align-items: center; grid-area: select; font-family: 'Open Sans', sans-serif; font-size: 0.8em; color: #535353; background: linear-gradient(145deg, #d3d3d3, #fafafa); box-shadow: 10px 10px 20px #a4a4a4, -10px -10px 20px #ffffff; &:hover { cursor: pointer; } } }

 <div class="selectWrapper"> <select name="typeSol" class="titSol" required> <option value="" disabled selected>Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <option value="">Select a Type</option> <!-- More options --> </select> </div>

Hope anyone can help.

Answer 1

You can use the following onfocus , onblur , and onchange events to change this. Where this represents the HTML DOM element. You can change the values accordingly

 .titSol, .selectBrand { width: 60%; display: grid; grid-template-areas: "select"; align-items: center; &::after { content: ''; clip-path: polygon(100% 0%, 0 0%, 50% 100%); width: 0.8em; height: 0.5em; grid-area: select; align-self: end; margin-right: 1em; background-color: #110F30; pointer-events: none; transition: transform 0.2s ease-out; } &:focus-within { &::after { transform: rotate(180deg); } } select { appearance: none; width: 100%; height: 3em; border-radius: 50px; border: none; outline: none; padding-inline: 1em; align-items: center; grid-area: select; font-family: 'Open Sans', sans-serif; font-size: 0.8em; color: #535353; background: linear-gradient(145deg, #d3d3d3, #fafafa); box-shadow: 10px 10px 20px #a4a4a4, -10px -10px 20px #ffffff; &:hover { cursor: pointer; } } }

 <div class="selectWrapper"> <select name="typeSol" class="titSol" onfocus='this.size=8;' onblur='this.size=1;' onchange='this.size=1; this.blur();' required> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <option value="" disabled selected>Select a Type</option> <!-- ...More Options --> </select> </div>