Update:
After some investigation, I discovered that the mysterious black square is actually a part of the scroll bar. By adding the following code snippet:
select::-webkit-scrollbar {
display: none;
}
The square no longer appears.
Initially, my select element appeared normal when not focused:
See here
However, upon focusing on it, an odd black square would appear in the top left corner: See here
Does anyone have suggestions on how to resolve this issue?
Here's the relevant portion of my code for reference:
<style>
html {
background-color: dodgerblue;
text-align: center;
}
select {
background-color: transparent;
border: 1px solid #ffffff;
color: white;
font-family: inherit;
outline: none;
padding-bottom: 100px;
padding-top: 100px;
width: 150px;
}
select option {
padding: 10px;
}
</style>
<select size="2">
<option>Option 1</option>
<option>Option 2</option>
</select>
Thank you in advance for any assistance.