如何在select下拉选择框左侧显示span/label文本内容

问题原因 #

<select> 标签仅支持 <option>、<optgroup> 作为合法子元素，你将 <span> 放入 <select> 内部的写法不符合HTML规范，浏览器会自动忽略或移出该span标签，因此无法实现左侧显示文本的效果。

解决方案 #

1. 修改HTML结构 #

使用Bootstrap输入组组件包裹下拉框，把"Sesso"文本放在下拉框左侧的附加项位置，原有外部资源、脚本引入无需改动：

<!-- Start your project here-->  
<div class="prov input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Sesso</span>
  </div>
  <select class="mdb-select" id="inputGroupSelect03" > 
    <option class="seleziona" selected value="0">Seleziona</option>
    <option id="sexuomo" name="radios" value="Male"  required class="sexbtn">Uomo</option>
    <option id="sexdonna" name="radios" value="Female" form="bmrcalc" required class="sexbtn">Donna</option>
  </select>
</div>  
<!-- End your project here-->

2. 补充CSS适配样式 #

原有CSS可以保留，新增以下代码调整对齐与布局：

/* 左侧文本与下拉框对齐 */
.input-group .input-group-text {
  align-self: center;
  margin-right: 8px;
}
/* 下拉框容器占满剩余宽度 */
.input-group .select-wrapper {
  flex: 1;
}

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