如何在选择标签中显示跨度/标签文本答案

【问题标题】：How to show span/label text into select tag如何在选择标签中显示跨度/标签文本
【发布时间】：2021-11-27 12:53:55
【问题描述】：

我正在尝试在下拉选择的左侧显示文本“sesso”。这就是我所做的，但它不起作用。我把 span 标签放在 select 标签里面。

小提琴：https://jsfiddle.net/snake93/7L168ws2/32/

input[type="text"]:not(.browser-default){
  text-align: right;
  margin-right: 10px;
}

.caret {
  margin-left: 10px;
}

.select-wrapper input.select-dropdown {
 padding-right: 15px!important;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/mdb.min.css">

  <!-- Start your project here-->  
<div class="prov">
  <select class="mdb-select" id="inputGroupSelect03" > 
    <span class="input-group-tex">Sesso</span>
    <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-->

  <!-- jQuery -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/mdb.min.js"></script>

【问题讨论】：

你不能。 span 不是 select 的有效子代。
为什么你没有在选择之外显示为标题？
当 span 未选中时，它不会显示在单词 seleziona 旁边，而是显示在框的上方，并且不与下拉菜单水平对齐。对不起，我的无知，但我是粉丝。
我想要得到的是一个下拉菜单，左侧带有标签或跨度，简而言之，它指示字段的标题，而右侧是允许操作的按钮打开下拉菜单。示例：ibb.co/WfV3Y6x
把它放在选择之外，绝对定位...？ jsfiddle.net/2jvrsdcx

标签： javascript html css bootstrap-4 mdbootstrap

【解决方案1】：

我不知道你的意思，但希望它可以帮助你。

https://jsfiddle.net/GeorgeLXL/spLgbutv/1/

// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').materialSelect();
});

input[type="text"]:not(.browser-default){
  text-align: right;
  margin-right: 10px;
}

.caret {
  margin-left: 10px;
}

.select-wrapper input.select-dropdown {
 padding-right: 15px!important;
}

.input-group-tex {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}

.prov {
  position: relative;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/mdb.min.css">

  <!-- Start your project here-->  
<div class="prov">
  <span class="input-group-tex">Sesso</span>
  <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-->

  <!-- jQuery -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/mdb.min.js"></script>

【讨论】：

非常感谢，正是我要找的结果。