HTML
<div class="dropdown">
<select name="questions">
<option value="question1">Where did you go to school?</option>
<option value="question2">What is the name of your pet?</option>
<option value="question3">What is another personal fact that an attacker could easily find on the internet?</option>
</select>
</div>
CSS
.dropdown-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.dropdown {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 6px;
}
select {
display: inline-block;
padding: 0.8rem 1rem;
font-size: 1em;
color: white;
background-color: transparent;
border: 1px solid gray;
border-radius: 6px;
cursor: pointer;
}
.dropdown::after {
position: absolute;
right: 0;
font-size: 1em;
color: white;
cursor: pointer;
}
select:focus {
border: 0.5px solid white;
outline: none;
}