如何在 css 中做可点击的自定义下拉箭头？

Question

我使用 css 设置了自定义下拉箭头，但它是不可点击的。那么我该如何解决呢？

.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

它不起作用，因为您将字体插入到选择之外，从而将其从选择选项中排除。您可以使用 select 伪元素来实现相同的目的。你可以在字体真棒文档中找到更多关于它的信息here。它回答了你的问题吗

Answer 2

有更简洁的方法来实现您想要实现的目标。查找Select2。

尽管如此，您的下拉菜单不可点击的原因是它与实际的下拉菜单重叠 - 为了规避这一点，请添加此属性；

pointer-events: none; 到你的.container i.fa-angle-down 班级。

即;

.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 solution here，可以在here 找到样本。

Answer 3

回答： : 如何在 CSS 中创建自定义下拉箭头？ 这是链接，（我的 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>

点赞，评论。

Answer 4

为什么不使用 SVG 而不是额外的图标？

.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>