How can i do clickable custom dropdown arrow in css?

Question

I set the custom dropdown arrow using css but it is not clickable right know. So how can i fix that?

.container select{
    border-radius: 20px;
    padding: 5px 38px 7px 23px;
    border: 2px solid orange;
    appearance: none;
    position: relative; 
}
.container i.fa-angle-down{
    position: absolute;
    right: 66.8%;
    top: 92.8%;
    border-radius: 20px;
    color: white;
    background-color: orange;
    padding: 8px;
    padding-left: 10px;
    font-size: 20px;
}

<div class="container">
<h6>Current open positions</h6>
<div class="form-group">
    <label class="search">Search by Location</label>
    <select>
        <option>Canada</option>
        <option>Dakor</option>
    </select><i class="fas fa-angle-down"></i>
</div>
</div>

Your question is not clear to what you wanted apparently. You just wanted to add `pointer when you hover over your select`. that does NOT mean clickable. Glad you got what you wanted. — Always Helping, Jul 09 '20 at 03:23

score 0 · Answer 1 · answered Jul 09 '20 at 02:32

It won't work since you are inserting the font outside of the select which excludes it from the select option. you can use select pseudo-element to achieve the same thing. You can find more about it here on font awesome documentation. does it answer your question

Dexterians · Accepted Answer · 2020-07-09T02:54:44.010

There are neater ways of doing what you're trying to achieve. Look up Select2.

In saying this though, the reason your dropdown isn't clickable is because it is overlapping the actual dropdown - to circumvent this, add this property;

pointer-events: none; to your .container i.fa-angle-down class.

ie;

.container i.fa-angle-down{
    position: absolute;
    right: 66.8%;
    top: 92.8%;
    border-radius: 20px;
    color: white;
    background-color: orange;
    padding: 8px;
    padding-left: 10px;
    font-size: 20px;
    pointer-events: none; //enables click-through
}

This will enable a "click-through" to the object/element behind it.

Another alternative is this solution here that I found for you, a sample can be found here.

score 0 · Answer 3 · answered Jul 09 '20 at 05:05

Why not make use of SVG instead of an extra icon?

.container select{
    border-radius: 20px;
    padding: 5px 38px 7px 23px;
    border: 2px solid orange;
    background-color: Transparent; 
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 512'><path d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z' style='fill: rgb(255, 193, 42);'></path></svg>") no-repeat right center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

<div class="container">
<h6>Current open positions</h6>
<div class="form-group">
    <label class="search">Search by Location</label>
    <select>
        <option>Canada</option>
        <option>Dakor</option>
    </select>
</div>
</div>

How can i do clickable custom dropdown arrow in css?

3 Answers3