Sans utiliser plugins , comment puis-je augmenter la hauteur de la boîte <select>
en CSS? J'ai essayé line-height
mais cela n’a pas fonctionné pour moi.
Merci
Je suis tombé sur cette autre réponse qui fonctionne réellement, si quelqu'un redistribue encore cette question.
Comment standardiser la hauteur d'une zone de sélection entre Chrome et Firefox?
En gros, vous modifiez la définition de l'apparence de l'élément, vous pouvez ensuite lui ajouter un style.
.className {
-webkit-appearance: menulist-button;
height: 50px;
}
Cela a fonctionné pour moi, mais cela change la bordure de l'élément. Assurez-vous simplement de vérifier le navigateur après le changement et de vous assurer que le style de la bordure est toujours acceptable.
J'espère que cela fonctionne pour vous
donnez simplement une hauteur à l’option dans votre feuille de style afin de pouvoir calculer facilement la hauteur du champ sélectionné avec le nombre de lignes d’option
<style>select>option{height:20px;}</style>
et ajoutez cette fonction dans votre balise de script comme vous le souhaitez ou copiez simplement cette
<script>function myFunction() {
var x = document.getElementById("mySelect").length;
var y = 20 * x +10;
document.getElementById("mySelect").style.height = y+"px";}</script>
Section du corps
<body onload="myFunction()"><select id="mySelect" multiple="multiple"><option>Apple</option>option>Pear</option><option>Banana</option><option>Orange</option><option>Banana</option></select></body>
Pour moi, ça a fait l'affaire:
select {
font: inherit;
}
Puisque la priorité est donnée au style en ligne, vous pouvez utiliser cette astuce pour augmenter la hauteur de votre liste de sélection. Tout ce que vous avez à faire est d’ajouter un style inline dans la balise select.
<!-----------If you are using Bootstrap ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" style=" height:50px;" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</form>
</div>
</body>