CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menuhtml-select
Justin
Justin

Reputation: 27301

Style SELECT element dropdown arrow

I'm trying to add CSS styles and a custom down arrow to a select element. I got hung up on the fact that I could not make IE/Firefox show the dropdown list via JavaScript when the drop-down arrow is clicked (as noted on SO before).

Square seems to have found a method to style their select element's drop-down arrow without interfering with the browsers default behavior... but I cannot figure out how they have done it.

See it live: https://squareup.com/market/jriegerco/football-season-kc-whiskey-red

I see they are using :before and :after -- but how is that allowing the click to go through the dropdown image and right to the select element below? What is this trickery?!

Square styled SELECT

CSS:

.dropdown-wrapper i{
    background: #FFF;
    background: linear-gradient(#FFF, #FAFAFA);
    border-left-color: rgba(45, 60, 72, 0.12);
    border-radius: 0 3px 3px 0;
    height: 40px;
    line-height: 39px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 43px;    
}

.dropdown-wrapper i:before  {
    background: rgba(252, 252, 252, 0);        
    background: linear-gradient(to right, rgba(252, 252, 252, 0), #FCFCFC 20px);        
    content: "";
    height: 40px;
    position: absolute;
    left: -31px;
    top: 0;
    width: 30px;
}

.dropdown-wrapper i:after, .button-dropdown i:after {
    content: "";
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 50%;
}

HTML:

<div class="dropdown-wrapper">
    <select class="dropdown button">
        <option>Select an option...</option>                
    </select>
    <i></i>
</div>

Upvotes: 0

Views: 1904

Answers (1)

guest
guest

Reputation: 6698

how is that allowing the click to go through the dropdown image and right to the select element below?

pointer-events: none; in the CSS allows the click to go through the image.

Upvotes: 4

Related Questions