带固定占位符的Dropdown：如何将标签嵌入下拉框边框顶部？

DevOps 小满

2026-7-20

实现下拉框内部顶部固定显示“from:”标签

要让“from:”字样一直留在下拉框边框内部顶部，选中选项后也保持位置，最终效果类似 From: Option 2，可以通过调整HTML结构和CSS定位实现，具体修改如下：

修改后的HTML代码

<div class="custom-select">
    <label class="select-label" for="dropdown">from: </label>
    <select id="dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</div>

给<label>添加select-label类，方便CSS精准定位
移除原select内的禁用默认选项，改用label固定显示“from:”

修改后的CSS代码

.custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 16px;
}

.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 28px 30px 8px 16px; /* 加大顶部内边距，给label预留位置 */
  border: 1px solid #ccc;
  background-color: white;
  width: 100%;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.custom-select select::-ms-expand {
  display: none;
}

.custom-select select:focus {
  outline: none;
}

.select-label {
  position: absolute;
  top: 8px; /* 定位到下拉框内部顶部 */
  left: 16px;
  font-weight: bold;
  color: #555;
  pointer-events: none; /* 避免label干扰下拉框点击交互 */
}