How can i do clickable custom dropdown arrow in css? - html

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>

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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>