I'm trying to make my site look more visually pleasing and the dropdown bar is really messing it up, here's what it looks like right now:
* {
margin: 0;
padding: 0;
}
#report_card {
background-color: black;
height: 5rem;
padding-top: 1rem;
}
#report_name {
display: block;
margin: auto;
padding: 0.5rem;
width: 12rem;
text-align: center;
}
<div id="report_card">
<select id="report_name" align="center">
<option>option 1</option>
<option>option 2</option>
<option>reaaaaaaaaalllllllyyyyyyyyyy long option 3</option>
</select>
</div>
I was hoping there is solution that would ideally be close to either of these 2:
But I'm also open to other suggestions of making the dropdown menu more better looking and please o please try not to use JavaScript unless absolutely necessary, the ideal case would be a css based solution
Edit: I'm also not looking for custom made dropdown menus