HTML liste Déroulante (select) avec du Texte et des Frontières après chaque valeur (option)

Je suis en train de réaliser deux choses avec liste Déroulante.

Je veux d'abord le texte à la ligne dans la liste des options dans un menu déroulant.
Deuxième, j'ai envie de mettre une frontière après chaque option

et je veux soutenir IE (et les autres navigateurs aussi).

C'est parce que j'en aurais long texte dans la liste déroulante et je ne veux pas les couper. Pour cette raison, je veux faire les choses mentionnées ci-dessus.

Quelque chose comme ceci:-

http://jsfiddle.net/fnagel/GXtpC/embedded/result/

sélectionner l'un avec "Même avec l'option de formatage de texte, Sélectionnez une
Adresse". Remarquez comment les options sont en forme et ont une
border-bottom avec chacun d'eux.

Voici ce que j'ai essayé (Texte):-

CSS:

.myselect {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myselect option {
  white-space: nowrap;
  width: 100% border-bottom: 1px #ccc solid;
  /* This doesn't work. */
}

HTML:

<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

cela ne fonctionne pas dans tous les navigateurs?? je suppose que cela devrait fonctionner sur firefox

InformationsquelleAutor Steve | 2013-09-02

CSS:

select {
  width: 100px;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  -webkit-appearance: none;
}

option {
  border: solid 1px #DDDDDD;
}

HTML:

<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

Je n'ai pas été en mesure de créer des multi-doublée options de Firefox, à partir de cette solution...
Je suis toujours face au problème, pas en mesure de placer du texte dans les options du menu déroulant.

InformationsquelleAutor Ashok Dhakhada

Actuellement accepté de répondre seulement tronque le texte avec des points de suspension et ajoute une frontière qui n'est pas de résoudre complètement le problème à portée de main.

J'ai l'impression que c'est plus complet, plus de croix-navigateur compatible réponse: Rendre le texte à sélectionner l'élément de l'habillage lorsque trop de temps?

En un mot, vous pouvez soit faire de la bonne façon à l'aide de javascript, ou de le faire d'une... pas compatible à l'aide de la propriété css white-space: pre-wrap sur votre option éléments.

Remarque: si vous allez avec l'aide de white-space: pre-wrap, assurez-vous d'ajouter -moz- et -o navigateur de préfixes.

Voici ce que j'ai trouvé comme un moyen rapide, simple CSS solution (bien que le Jquery que j'ai mentionné, c'est plus robuste et mieux):

CSS:

select {
  width: 200px;
  max-width: 100%;
  /* So it doesn't overflow from it's parent */
}

option {
  /* wrap text in compatible browsers */
  -moz-white-space: pre-wrap;
  -o-white-space: pre-wrap;
  white-space: pre-wrap;
  /* hide text that can't wrap with an ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  /* add border after every option */
  border-bottom: 1px solid #DDD;
}

HTML:

<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

InformationsquelleAutor Nathan Blair

Vous devez vous connecter pour publier un commentaire.