如何将跨度/标签文本显示为 select 标签

Question

我试图在下拉列表 select 的左侧显示文本“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>

Answer 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>