Estoy tratando de mostrar el texto "sesso" en el lado izquierdo de la selección desplegable. Esto es lo que hice pero no funciona. Puse la etiqueta de intervalo dentro de la etiqueta de selección.
Violín: 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>No sé si te referías a esto, pero espero que te pueda ayudar.
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>