My dropdown menu currently has gradient overflow text and a transition effect on the selection's wrapper. However, when hovered over, it looks a bit strange. How can I improve its appearance?
Here is the HTML snippet:
<div class="durationDropdown">
<select role="listbox" class="durationSelect">
<option value="0">Less than 1 month</option>
</select>
</div>
CSS snippet:
.container {
width: 150px;
}
.durationDropdown {
padding: 0px;
flex: 1;
text-align: left;
position: relative;
cursor: pointer;
height: 5.1875rem;
transition: 250ms;
border: 1px solid #eee;
}
.durationDropdown::after {
content: "";
display: block;
width: 40px;
top: 0%;
right: 0;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
pointer-events: none;
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
background: none;
}
.durationDropdown:hover {
background: black;
}
To see how it currently looks and view additional CSS in my code, check out my fiddle. Any suggestions or assistance would be greatly appreciated!