Question

我想将下拉列表Vvron带到我的下拉列表中，以便当我点击下拉列表中的任意位置时，我可以看到菜单。现在，雪佛龙下来的区域是无法点击的。

我已经研究过使用字体真棒的其他选项，但是还没有这样做。

  <div id="actions-dropdown" class="actions">
      <select class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
          <option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
      </select>
      <i id="arrow" class="fa fa-chevron-down"></i>
  </div>

CSS

.select-option {
    background: transparent;
        background-size: auto auto;
    -moz-appearance: none;
    padding-top: 0px;
    background-size: 20px;
    color: #ffffff;
    font-size: 30px;
    width: 100px;
    height: 40px;
    border: 1px white solid;
    margin: 11px 0px 0px 1071px;
    z-index: 5;
}

.fa-chevron-down {
    color: red;
    z-index: -5;
    margin: 0px 0px 0px -5px;
}

方法2使用Font Awesome

.select-option {
  border: 1px solid #ccc;
  overflow: hidden; 
  height: 40px;    
  width: 240px;
  position: relative;
  display: block;
  background:black;
}

select{       
  height: 40px;
  padding: 5px;
  border: 0;
  font-size: 16px;       
  width: 240px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-option:after {
  content:"\f078";
  font-family: FontAwesome;
  background: : black;
  padding: 12px 8px;
  position: absolute; right: 0; top: 0;
  background: blue;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;      
  pointer-events: none;
  box-sizing: border-box;   
}

Answer 1

像这样更改你的标记。使用label代替i。将pointer-events: none设置为.fa-chevron-down

   <div id="actions-dropdown" class="actions">
          <select id="select-el" class="select-option" required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
              <option class='option' *ngFor='let option of options' [value]="option">{{option}}</option>
          </select>
          <label id="arrow" for="select-el" class="fa fa-chevron-down"></label>
      </div>

.select-option {
    background: transparent;
        background-size: auto auto;
    -moz-appearance: none;
    padding-top: 0px;
    background-size: 20px;
    color: #ffffff;
    font-size: 30px;
    width: 100px;
    height: 40px;
    border: 1px red solid;
    margin: 11px 0px 0px 0;
    z-index: 5;
}
.actions {
position: relative;
display: inline-block;
}

.fa-chevron-down {
    color: red;
    z-index: 7;
    margin: 0px 0px 0px -5px;
    position: absolute;
    top:20px;
    right:0;
    pointer-events:none;
}

.select-option {
  border: 1px solid #ccc;
  overflow: hidden; 
  height: 40px;    
  width: 240px;
  position: relative;
  display: block;
  background:black;
}

select{       
  height: 40px;
  padding: 5px;
  border: 0;
  font-size: 16px;       
  width: 240px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select-option:after {
  content:"\f078";
  font-family: FontAwesome;
  background: : black;
  padding: 12px 8px;
  position: absolute; right: 0; top: 0;
  background: blue;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;      
  pointer-events: none;
  box-sizing: border-box;   
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
 <div id="actions-dropdown" class="actions">
          <select id="select-el" class="select-option" required>
              <option class='option'>option</option>
              <option class='option'>option</option>
              <option class='option'>option</option>
              <option class='option'>option</option>
          </select>
          <label  for="select-el" class="fa fa-chevron-down"></label>
      </div>

Answer 2

案例1）z-index: -5;可能是您的问题。

.fa-chevron-down {
    color: red;
    z-index: -5;
    margin: 0px 0px 0px -5px;
}

案例2）.select-option:after不确定这是否有效，因为表单元素不具有伪元素，如：before和：after。您可能需要一个不同的元素，例如span来包装<select>元素并将:after应用于span。

如何使雪佛龙可点击下来

2 个答案: