如何在 <select> html 标记中将字符串添加到显示/选择的选项？

Question

假设我有以下 HTML ...<select>  <option>1</option>  <option>2</option>  <option>3</option></select>我想显示带有附加字符串的选定选项，该字符串根据下拉列表中的选定数字显示如下“数量：1”、“数量：2”、“数量：3”的数量。在选项下拉列表中，我只想显示数字（即没有“数量：”字符串前置）。这种 qty 下拉列表样式的示例是 Amazon.com 产品：Amazon Product Example w。数量下拉列表。您应该会在页面右侧看到“数量：”下拉菜单。这就是我的目标，它需要跨桌面和移动设备工作。我已经尝试过伪元素并将跨度作为子元素添加到选择标签，但无济于事。如何实现这种类型的下拉菜单？

Answer 1

label {

  position: relative;

  background: #e7e9ec;

  display: inline-block;

  height: 25px;

  width: 100px;

}

select,

span {

  position: absolute;

  top: 0;

  left: 0;

}

select {

  width: 100%;

  padding: 4px 0;

  text-indent: 5ch;

  background: transparent;

  border-radius: 3px;

  border-color: #ADB1B8 #A2A6AC #8D9096;

  border-style: solid;

}

select:focus {

  outline: 0;

  border-color: #e77600;

  box-shadow: 0 0 3px 2px rgba(228, 121, 17, .5);

}

span {

  top: 4px;

  left: 6px;

}

option[disabled] {

  background: #EEE;

  font-size: 1px;

}

<label for="select">

<span>Qty: </span>

<select id="select">

  <option value="0">0 (Delete)</option>

  <option disabled></option>

  <option value="1" selected>1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

  <option disabled ></option>

  <option>+10</option>

</select>

</label>