I'm trying to show the text "sesso" on the left side of the dropdown select. This is what I did but it doesn't work. I put span tag inside select tag.
Fiddle: 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>CodePudding user response：
I don't know you meant this, but hope it could help you.
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>