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 03:35

Answer : : How to create a custom dropdown arrow in css? Here Is The Link, (My CodePen) : Click Here

select {

  /* styling */
  background-color: white;
  border: thin solid blue;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}




select.round {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    radial-gradient(#ddd 70%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}

select.round:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    radial-gradient(gray 70%, transparent 72%);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}





select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

body {
  background-color: rgb(0,159,214);
  font: bold 1em/100% "Helvetica Neue", Arial, sans-serif;
  padding: 2em 0;
  text-align: center;
}
h1 {
  color: white;
  line-height: 120%;
  margin: 0 auto 2rem auto;
  max-width: 30rem;
}

<h1>Tutorial How to create a custom dropdown arrow in css.</h1>




<select class="classic">
  <s>CSS SELECT arrow (classic)</s>
  <option>No external background image</option>
  <option>No wrapper</option>
</select>
<br><br>
<select class="round">
  <option>CSS SELECT arrow (round)</option>
  <option>No external background image</option>
  <option>No wrapper</option>
</select>
<br><br>
<select class="minimal">
  <option>CSS SELECT arrow (minimal)</option>
  <option>No external background image</option>
  <option>No wrapper</option>
</select>

Leave A Like, Comment.

score 0 · Answer 4 · 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?

4 Answers4