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


假设我有以下HTML…

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

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

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

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

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

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

谢谢您。

解决方案:

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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

在SwiftUI中为TextField设置初始值--比较新旧值。

2022-9-8 10:49:38

未分类

输入流使程序等待

2022-9-8 10:49:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索