выпадающая стрелка не работает

Question

У меня есть следующий выпадающий список, который функционирует

Однако, когда я нажимаю на стрелку, как вы можете видеть ниже, стрелкане работает. Когда я нажимаю на него, раскрывающийся список не отображается.

Кажется, проблема связана с CSS.

Вот мой CSS

.filter-building-name {
                position: relative;
                margin-left: 15px;
                width: 200px;
                height: calc(100% - 20px);
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;

                >select { 
                    -moz-appearance: none;
                    -webkit-appearance: none;
                    -webkit-border-radius: 0px;
                    appearance: none;
                    outline-width: 0;
                    color: #4A4A4A;
                    font-family: 'Roboto';
                    font-size: 12px;
                    line-height: 18px;
                    border: 0px;
                    background-color: transparent;   
                    border-bottom: 1px solid #D8D8D8;                

                    &:focus {
                        box-shadow: unset;
                        outline: none
                    }    
                } &:after { //the arrow should be using some part here but I cannot figure where
                    position: absolute;                
                    top: 0.8rem;
                    left: 105%;
                    /* Styling the down arrow */
                    width: 0;
                    height: 0;
                    padding: 0;
                    content: '>';
                    font: 21px "Consolas", monospace;
                    color: #333;
                    -webkit-transform: rotate(90deg);
                    -moz-transform: rotate(90deg);
                    -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
                }

                select::-ms-expand {
                    display: none;
                }
            }

Стрелка должна использовать какую-то часть в &:after, но я не могу понять где.

Это HTML-код, который я использую

<div class="filter-building-name">
    <select id="assetsId" class="form-control" [(ngModel)]="selectedAsset" (change)="emitAssetEvEt()">
        <option *ngFor="let asset of assetList" [ngValue]="asset"
            [selected]="asset.property_id == selectedAsset.property_id">{{asset.property_name}}</option>
    </select>
</div>

Любые идеи приветствуются.

Спасибо.

Answer 1

Установите select z-index на 999 и сделайте его блокированным (width:100%), чтобы он охватывал всю ширину

Answer 2

Решение представляет собой набор советов, которые Awais и Zuber дали вам.

Вы должны преобразовать свой выбор в блоке с шириной 100%(но если вы используете Bootstrap, класс form-control сделает это преобразование для вас) и (возможно, более важно) используйте pointer-events: none; для ::after псевдоэлемента.

Это результат (Я превратил ваш угловой шаблон в обычный ):

.filter-building-name {
  position: relative;
  margin-left: 15px;
  width: 200px;
  height: calc(100% - 20px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-building-name > select {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  appearance: none;
  outline-width: 0;
  color: #4A4A4A;
  font-family: 'Roboto';
  font-size: 12px;
  line-height: 18px;
  border: 0px;
  background-color: transparent;
  border-bottom: 1px solid #D8D8D8;

  width: 100%; /*add this*/
  display: block; /*add this*/
}
.filter-building-name > select:focus {
  box-shadow: unset;
  outline: none;
}
.filter-building-name:after {
  position: absolute;

  top: 5px; 
  right: 0; /*change this*/

  width: 0;
  height: 0;
  padding: 0;
  content: '>';
  font: 21px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);

  pointer-events: none; /*add this*/
}
.filter-building-name select::-ms-expand {
  display: none;
}

<div class="filter-building-name">
    <select id="assetsId" class="form-control">
        <option>REAL ESTATE</option>
    </select>
</div>