主页 / 问题 / 661235
Accepted
Артём PeGaS
Asked:2020-05-03 05:19:12 +0000 UTC2020-05-03 05:19:12 +0000 UTC

Image on top of select 如何让点击图片就像点击选择一样？

  • 772

单击图像时如何使其弹出列表？

div{
  position: relative;
  width:216px;
  height: 30px;
  margin-top: 10px;
}
select{
  width:100%;
  height: 100%;
  padding-left: 50px;
  background: linear-gradient(to left, #007A31 25px, white 25px, white 100%);
  
}

div img{
	position: absolute;
	right: 4px;
	top: 7px;
}
<div>
<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>
<img src="css/profi-overalls-catalog.png" alt="">
</div>

html

1 个回答

  1. Best Answer

    您可以设置图片pointer-events: none：

    div {
  position: relative;
  width: 216px;
  height: 30px;
  margin-top: 10px;
}

select {
  width: 100%;
  height: 100%;
  padding-left: 50px;
  background: linear-gradient(to left, #007A31 25px, white 25px, white 100%);
}

div img {
  position: absolute;
  right: 5px;
  top: 0;
  width: 16px;
  height: 32px;
  pointer-events: none;
}
    <div>
  <select>
    <option>Пункт 1</option>
    <option>Пункт 2</option>
  </select>
  <img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/firey-orange-jelly-icons-media/003158-firey-orange-jelly-icon-media-media2-arrow-down.png"/>
</div>

    • 1

相关问题