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>

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>

Answer 2

我已经做过，position: absolute; float:right将内容设置在右侧，margin-left: -1.5em相对移动，margin-top: 0.75em相同，只是略微向下移动。

如果我们使用px，那么它在手机或平板电脑上的输出可能会有所不同，但是这里我使用em而不是px。 em和rem主要用于更改字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .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"; 
        /* changes required it works with any view port*/
        position: absolute;
        float: right;
        margin-left: -1.5em;
        margin-top: 0.75em;
        /* end  */
        }

    </style>
</head>
<body>
    <div class="custom-selection">
        <select class="round" id="myselect">
             <option value="Rajkot">Rajkot</option>
             <option value="Ahmedabad">Ahmedabad</option>
             <option value="Surat">Surat</option>
        </select>
    </div>
</body>
</html>

将可点击的箭头添加到下拉菜单中

2 个答案: