Question

我有一个带有CSS箭头（和行）的选择下拉列表。如果单击箭头以外的任何位置，则会打开下拉菜单，但如果直接单击箭头则不会打开。我希望箭头也可以点击。

这是我的代码：

＆＃13;

this.options[this.selectedIndex].innerHTML

＆＃13;

.select {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 6px;
}

.select:before,
.select:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.select:before {
  right: 37px;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background-color: #636667;
}

.select:after {
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: transparent 6px solid;
  border-top: #636667 6px solid;
}

＆＃13;

Answer 1

尝试添加pointer-events: none。

Answer 2

它不起作用的原因是因为伪元素是父包装器的一部分，但即使这样，伪元素也不会对选择元素起作用。

最简单的方法是使用以下CSS代替background属性来模仿外观。

例如......

select {
    background: url('image.png') 0px 0px no-repeat #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

此问题提供a working example。以下是该答案中包含的the fiddle链接。 信用是由于该问题的回答者的工作示例。

Answer 3

尝试这个

＆＃13;

<!DOCTYPE html>
<html>
<head>
 <style>
  .select {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 6px;
}

select {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

select {
	border: 0 none;
    height: 40px;
    width: 100%;
}


.select:before,
.select:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.select:before {
  right: 37px;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background-color: #636667;
}

.select:after {
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: transparent 6px solid;
  border-top: #636667 6px solid;
}

.select {
   border: 1px solid #666;
    border-radius: 0;
}
    </style>
</head>
<body>
 
 <div class="select">
  <select class="form-control" id="state-dropdown">
	<option>Select State</option>
  </select>
</div>
</body>
</html>

＆＃13;

选择的CSS箭头没有单击

3 个答案: