如何为HTML的select标签添加输入标签与标题文本

下面提供几种实用的实现方式，帮你给select标签添加"Selected subscriptions"标题：

方法1：使用fieldset + legend（原生语义化方案） #

这种方式利用HTML原生标签实现，无需额外CSS就能达到类似效果，符合语义化标准：

<fieldset>
  <legend>Selected subscriptions</legend>
  <select name="select"> 
    <option value="value1" selected>Subscription 1</option>
    <option value="value2">Subscription 2</option>
    <option value="value3">Subscription 3</option>
  </select>
</fieldset>

方法2：label标签配合CSS（样式更灵活） #

通过label标签定义标题，再用CSS调整位置和样式，能更精准控制视觉效果：

<div class="select-container">
  <label for="subscription-select">Selected subscriptions</label>
  <select id="subscription-select" name="select"> 
    <option value="value1" selected>Subscription 1</option>
    <option value="value2">Subscription 2</option>
    <option value="value3">Subscription 3</option>
  </select>
</div>

<style>
.select-container {
  position: relative;
  margin-top: 1.5rem;
}
.select-container label {
  position: absolute;
  top: -1rem;
  left: 0.5rem;
  background: white;
  padding: 0 0.3rem;
  font-size: 0.9rem;
}
</style>

方法3：纯CSS伪元素实现（无需额外HTML标签） #

如果不想增加HTML标签，可以给父容器添加类，通过CSS伪元素生成标题：

<div class="select-wrapper">
  <select name="select"> 
    <option value="value1" selected>Subscription 1</option>
    <option value="value2">Subscription 2</option>
    <option value="value3">Subscription 3</option>
  </select>
</div>

<style>
.select-wrapper {
  position: relative;
  margin-top: 1.5rem;
}
.select-wrapper:before {
  content: "Selected subscriptions";
  position: absolute;
  top: -1rem;
  left: 0.5rem;
  background: white;
  padding: 0 0.3rem;
  font-size: 0.9rem;
}
</style>

内容的提问来源于stack exchange，提问作者abdulahMari