web-dev-qa-db-fra.com

Comment styler (augmenter la hauteur) d'une zone de sélection en CSS?

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

html5css3
12
Jazmin

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.

26
Vallier

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>
3
prajun karn

Pour moi, ça a fait l'affaire:

select {
    font: inherit;
}
2
Dodekeract

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>

0
Shalinee SIngh