Question

我需要创建一个下拉列表，其中select标签上有div标签。 div具有与按钮相同的功能：如果我点击它，它允许展开下拉列表。我的问题是div必然高于选择，没有检测到点击。我该怎么办（使用CSS / JS）？我想将div保持在同一个显示相同的位置，但点击div会导致单击选择的操作这是HTML和CSS代码

＆＃13;

.parent {
  width: 200px;
}

.dropdown>div {
  background: grey;
  color: white;
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown>select {
  width: 100%;
  height: 2rem;
  right: 0;
  top: 0;
  bottom: 0;
}

.dropdown {
  position: relative;
}

＆＃13;

<div class="parent">
  <div class="dropdown">
    <select name="text">
        <option value="value1">Value 1</option>
        <option value="value1">Value 2</option>
        <option value="value1">Value 3</option>
    </select>
    <div>
      <span>v</span>
    </div>
  </div>
</div>

＆＃13;

Answer 1

只需将pointer-events: none;添加到相关div即可。它将允许点击事件“通过”div，就像它根本不存在一样。点击事件将由其下方的选择权处理。

.parent {
  width: 200px;
}

.dropdown>div {
  background: grey;
  color: white;
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* ADD THIS */
  pointer-events: none;
}

.dropdown>select {
  width: 100%;
  height: 2rem;
  right: 0;
  top: 0;
  bottom: 0;
}

.dropdown {
  position: relative;
}

<div class="parent">
  <div class="dropdown">
    <select name="text">
        <option value="value1">Value 1</option>
        <option value="value1">Value 2</option>
        <option value="value1">Value 3</option>
    </select>
    <div>
      <span>v</span>
    </div>
  </div>
</div>

Answer 2

我不认为覆盖输入元素是一个很好的方法。如果你将禁用属性应用于你的输入，它将更加清洁和安全：

<select disabled>

Div标签可防止点击我的下拉列表

2 个答案: