html - 将可点击箭头添加到下拉选择

Question

我添加了选择标签，但无法正确对齐选择区域内的箭头。它与选择区域外对齐。也无法单击箭头。

我应用的 CSS 有任何错误。

.custom-selection select {
  border:none;
  background-color:white;
  color: blue;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  margin: 0;      
  -webkit-appearance: none;
  -moz-appearance: none;
}
.custom-selection option{
  border-radius: 18px;
}

.custom-selection::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  color:blue;
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.custom-selection:hover::before {
  color:white;
  background-color: rgba(255, 255, 255, 0.2);
}
.custom-selection::after {
  content: "\25bc"; 
  position: absolute;
  top: 0;
  right: 10;
}

<div class="custom-selection">
  <select class="round" id="myselect">

  </select>
</div>

标签： htmlcss

Answer 1

右、左、上或下需要用一个单位指定...... CSS无法为你决定：

问题在课堂上：.custom-selection::after。它比基本问题更复杂，请查看评论以获取所有内容。

演示：

$("#myselect").on("click", function() {
  if($('.custom-selection.rotate').length > 0){
    $('.custom-selection').removeClass('rotate');
  }
  else{
    $('.custom-selection').addClass('rotate');
  }
});

body{
  background-color:red;
}
.custom-selection{
  position:relative;
  background-color:white;
  border-radius: 10px;
}
.custom-selection select {
  border:none;
  color: blue;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  margin: 0;      
  -webkit-appearance: none;
  -moz-appearance: none;
  position:relative;
  z-index:2;
  background-color: transparent;
}
.custom-selection option{
  border-radius: 18px;
}

.custom-selection::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  color:blue;
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  display:block;
  z-index:1;
}

.custom-selection:hover::before {
  color:white;
  background-color: rgba(255, 255, 255, 0.2);
}
.custom-selection::after {
  content: "\25bc"; 
  position: absolute;
  top: calc(50% - 9px);
  right: 15px;
  background-color:white;
}
.custom-selection.rotate::after {
  transform: rotate(180deg);
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-selection">
  <select class="round" id="myselect">
    <option>test</option>
    <option>test2</option>
  </select>
</div>