假設我有以下 HTML ...<select> <option>1</option> <option>2</option> <option>3</option></select>我想顯示帶有附加字符串的選定選項，該字符串根據下拉列表中的選定數字顯示如下“數量：1”、“數量：2”、“數量：3”的數量。在選項下拉列表中，我只想顯示數字（即沒有“數量：”字符串前置）。這種 qty 下拉列表樣式的示例是 Amazon.com 產品：Amazon Product Example w。數量下拉列表。您應該會在頁面右側看到“數量：”下拉菜單。這就是我的目標，它需要跨桌面和移動設備工作。我已經嘗試過偽元素并將跨度作為子元素添加到選擇標簽，但無濟于事。如何實現這種類型的下拉菜單？
1 回答
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
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>
添加回答
舉報
0/150
提交
取消