html - 背景图像出现在选择框 HTML 上

Question

我正在自定义 html 和 css 中的选择选项框。我想在选项框中添加一个滚动条。但是在添加滚动条后，我遇到了一个问题，即选中框的图像保留在屏幕上。

这是我正在使用的示例。

.selectbox {
	width: 30%;
}
.selectWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #bbb;
    border-radius: 2px;
    background:#FFFFFF url('https://cdn.iconscout.com/icon/free/png-256/down-chevron-1438184-1216147.png') right 13px center no-repeat;
	
}

.selectWrapper select {
        padding: 12px 40px 12px 20px;
        font-size: 18px;
        line-height: 18px;
        width: 100%;
        border: none;
        box-shadow: none;
        background: transparent;
        background-image: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: scroll;
    }

<div class="selectbox">
		<div class="selectWrapper">
		<select id="selectOpt" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
			<option>Lorem</option>
			<option>Parturient</option>
			<option>Euismod</option>
			<option>Lorem</option>
			<option>Parturient</option>
			<option>Euismod</option>
			<option>Lorem</option>
			<option>Parturient</option>
			<option>Euismod</option>
			<option>Lorem</option>
			<option>Parturient</option>
			<option>Euismod</option>
			<option>Lorem</option>
			<option>Parturient</option>
			<option>Euismod</option>
			<option>Lorem</option>
			<option>Parturient</option>
			<option>Euismod</option>
		</select>
		</div>
		</div>

Answer 1

您需要将 background-position: 95% 0; 和 background-size: 40px; 添加到 selectWrapper

这是更新后的 fiddle :

.selectbox {
  width: 30%;
}

.selectWrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  border: 1px solid #bbb;
  border-radius: 2px;
  background: #FFFFFF url(https://cdn.iconscout.com/icon/free/png-256/down-chevron-1438184-1216147.png) right 0 center no-repeat;
  background-position: 95% 0;
  background-size: 40px;
}

.selectWrapper select {
  padding: 12px 40px 12px 20px;
  font-size: 18px;
  line-height: 18px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: scroll;
}

<div class="selectbox">
  <div class="selectWrapper">
    <select id="selectOpt" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
      <option>Lorem</option>
      <option>Parturient</option>
      <option>Euismod</option>
      <option>Lorem</option>
      <option>Parturient</option>
      <option>Euismod</option>
      <option>Lorem</option>
      <option>Parturient</option>
      <option>Euismod</option>
      <option>Lorem</option>
      <option>Parturient</option>
      <option>Euismod</option>
      <option>Lorem</option>
      <option>Parturient</option>
      <option>Euismod</option>
      <option>Lorem</option>
      <option>Parturient</option>
      <option>Euismod</option>
    </select>
  </div>
</div>