我如何在<select> html标签中的displayselected选项前加上一个字符串？[关闭]

Question

封闭. 这个问题需要 细节或清晰度. 目前不接受回答。

---

想改进这个问题？ 添加细节并澄清问题，通过 编辑本帖.

封闭 3个月前.

改进这个问题

假设我有以下HTML...

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

我想在显示所选选项时，在前面加上一个字符串，显示数量如下 "数量。1", "数量: 2"，"数量：3"。3"，根据下拉菜单中选择的数量。

在选项下拉菜单中，我希望只显示数字（即不显示 "数量："字符串）。这种数量下拉样式的一个例子是Amazon.com产品。亚马逊产品示例与数量下拉菜单. 你应该看到页面右侧的 "数量："下拉菜单。

这就是我的目标，它需要在桌面和移动设备上工作。

我已经尝试了伪元素和添加跨度作为选择标签的子元素，但没有效果。

我如何实现这种类型的下拉式？

谢谢您。

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>