Как сделать настраиваемую стрелку раскрывающегося списка в 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

Почему бы не использовать 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>

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
}

Это позволит «переходить по клику» к объекту / элементу за ним.

Другой альтернативой является это решение здесь , которое я нашел для вас, образец можно найти здесь .

Answer 3

Ответ:: Как создать настраиваемую стрелку раскрывающегося списка в css? Вот ссылка, (My CodePen): Щелкните здесь

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

Это не сработает, поскольку вы вставляете шрифт за пределами выбора, что исключает его из опции выбора. вы можете использовать псевдоэлемент select, чтобы добиться того же. Вы можете найти больше здесь в документации font awesome. отвечает ли он на ваш вопрос