0
votes

Comment définir la largeur de l'option dans la liste déroulante?

J'ai une liste déroulante sur Internet Explorer, et j'essaie de définir la largeur de l'option avec une liste défilable:

<select id="IndicsLibres" style="width:200px;overflow-y: scroll;">
  <option id="teste" value="0" style="max-width:10px;width:10px;">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddffffffffffffffff
  </option>
  <option value="1">aaaa</option>
  <option value="2">bbb</option>
</select>

html css internet-explorer

3 commentaires

Pourquoi avez-vous besoin de changer la largeur d'une option lorsque vous pouvez modifier la largeur de la boîte de sélection?

Hello Towey, merci pour votre commentaire, je dois changer la largeur des options, CoZ lorsque vous cliquez sur le menu, et si le texte est si long, l'option prend la longueur de la Texte et je ne veux pas être montré. comme ça

Je comprends maintenant. Les cases Select Select sont très limitées à ce que vous pouvez remplacer afin que je recommande d'utiliser un sélecteur de liste déroulant personnalisé afin de pouvoir réserver entièrement les options de la liste.

3 Réponses :

1
votes

Cochez la case, les boutons radio et les cases à cocher sont rendus différemment dans différents navigateurs en raison de leur code natif. Vous devez donc réaliser ce que vous recherchez, vous devrez écrire vos fonctionnalités personnalisées.

2 commentaires

Merci beaucoup de gars, mais comment faire cela, une logique à suivre? Quelle chose que je dois changer ...

Je travaillais sur quelque chose de similaire et vous pouvez jeter un coup d'œil sur PEN-1 et Pen-2 . Aucun d'entre eux ne sont entièrement remplis de fonctionnalités sage. Votre autre option serait d'utiliser des bibliothèques telles que JQueryui ou Bootstrap, ce qui le fait pour vous.

0
votes

Si vos options disposent d'espace qu'il y a de l'espace que le code suivant peut vous aider à résoudre votre problème.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>ffffffff ffffffff ffffffff fffffff fffffff ffffff ffffff ffffff</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

0 commentaires

0
votes

J'ai fait quelques modifications apportées au code. La largeur initiale peut être réduite mais la largeur de la liste déroulante ne peut pas être réduite car si elle doit couvrir toute la longueur de vos optines.

<select id="IndicsLibres">
  <option id="teste" value="0">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddffffffffffffffff
  </option>
  <option value="1">aaaa</option>
  <option value="2">bbb</option>
</select>

0 commentaires