CODEWITHSUNDEEP
htmlcss
Warve
Warve

Reputation: 511

Add icon to select dropdown

I'm trying to add in an icon to the end of a select group. I've abs positioned the pseudo element but I'm unable to see it.

Markup:

<select id="signup-sector" name="signup-sector" class="signup-select">
                        <option value="sector">Sector</option>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                    </select>

CSS:

select.signup-select::after {
    content: "\f107;";
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    color: black;
}

The select has a position relative set.

Thanks

Upvotes: 0

Views: 6250

Answers (1)

yash
yash

Reputation: 2291

here is what i do, try this.. hope this may help you...

.signup-select:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 3px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}
<select id="signup-sector" name="signup-sector" class="signup-select">
                        <option value="sector">Sector</option>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                    </select>

Upvotes: 1

Related Questions