Je suis nouveau dans le style des éléments HTML (par exemple, entrez et sélectionnez dans ce cas) et je cherche à mettre en place un élément d'entrée / sélection combiné visuellement. En substance, l'entrée et la sélection seraient toujours complètement séparées en tant qu'éléments de formes, mais basés sur la classe et la CSS, je voudrais insérer le contenu du menu SELECT dans le côté droit du champ de saisie. Désolé je ne suis pas de photoshoper, alors voici une représentation de ce que cela pourrait ressembler à: Comme vous pouvez le voir la partie gauche de l'entrée est où vous devez taper la chaîne de l'entrée. L'élément, et la chute de sélection est insérée dans la bordure de l'élément d'entrée (le [V] est censé être une flèche vers le bas pour déposer la liste). Tous les liens sur la façon de se mettre en train de regarder un style de regard comme ceci ou suggestions sont les bienvenus.
5 Réponses :
quelque chose comme ça devrait accomplir ce que vous voulez.
@Qqwy Si vous cliquez sur le lien VOUS Voyez-vous la section de résultat avec le texte / la boîte déplacée vers la droite? Si oui pouvez-vous modifier la question pour montrer à quoi ressemble votre fichier.
Je ne vois pas du tout le choix. Je vois l'étiquette de l'espace et une boîte d'entrée. Il n'y a pas de sélection.
@Qqwy votre droite je n'ai pas ajouté une boîte de sélection, je viens de mettre une boîte de saisie. Je pensais que vous le modifiez si nécessaire.
@Robert: ici est une version modifiée. Il est presque identique à la réponse que j'ai postée ci-dessous. J'espère que c'est ce que vous vouliez dire.
@Robert: Désolé. Mauvais lien. Ce fonctionne. J'ai également ajouté un minuscule bit de JS qui ajoute la valeur de l'élément sélectionné dans la zone de texte, comme décrit dans la question.
@Qqwy, merci pour l'effort mais je ne dois pas m'expliquer très bien. J'essaie essentiellement de créer une boîte de recherche qui me permet de rechercher plusieurs choses comme "Nom de la société, Numéro de téléphone de la société, Site Web de la société". Je pourrais simplement mettre un champ de saisie de texte dans lequel je voudrais entrer mes conditions de recherche, puis une liste de travail Sélectionnez le type de données que je recherche dans une liste de sélection assis à côté de la boîte de saisie. Je veux juste insérer le menu déroulant Sélectionner dans la bordure du champ de saisie de telle sorte qu'il ressemble à un champ de saisie.
@somecallMemke n'est-ce pas ce que tu veux? Je m'excuse de ne pas comprendre complètement, mais cette solution semble accomplir ce que vous avez décrit jsfiddle.net/xfqmf/1
@Robert Oui, c'est essentiellement ce que je cherche à faire, mais j'espérais avoir de l'aide à coiffer la chose pour avoir l'air vraiment sympa. De plus, j'espérais garder le texte à l'intérieur du champ de saisie de disparaître sous l'entrée Sélectionner en quelque sorte.
@SomecallMemke Ajouter une longueur maximale dans le texte
@Robert Merci pour la maxlength, c'est une bonne idée! Parfois, les solutions les plus simples sont les plus élégantes. En ce qui concerne le piratage du CSS de l'entrée, il semble être assez difficile de faire en tant que coiffant de chaque navigateur différemment. Souhaite moi bonne chance.
Ouais, il n'est pas facile de faire la boîte d'entrée exactement ce que vous voulez. J'ai traité cela avant et non, ce n'est pas amusant avec un navigateur croisé.
@Tall se rapprocher de ce: jsfiddle.net/xfqmf/5 Comment s'adapterait-on automatiquement le contenu du choix de sélection dans le champ de saisie? Je me demande s'il y a une sorte de moyen de déterminer la largeur de l'élément sélectionné et que le CSS se donner de manière dynamique une marge négative-gauche? Ou peut-être d'élargir dynamiquement l'entrée elle-même pour accueillir l'élément Select?
L'exemple suivant est très simple. Il montre la principale chose que vous voudriez faire: car les éléments de forme sont capables d'être stylés avec CSS, comme tout le reste, c'est assez simple. Cet exemple a toujours des problèmes de style avec des navigateurs non-Firefox, je l'améliorerai un peu. EDIT: Un exemple en ligne de ce que vous voulez être vu ici:
Il y a une bibliothèque que vous pouvez essayer: https://github.com/eredacokmerke/dm-i < / a>
6 ans plus tard: l'élément DATALISTE peut aider.
https://developer.mozilla.org/nl/docs / Web / html / élément / datataliste
(Safari ne supporte pas cela, pourtant)
EDIT: Lien vers
Ne connaissait pas celui-ci. Tu m'as sauvé quelques heures de coiffage.
La réponse ci-dessus vous emmène à la version néerlandaise. Voici le lien vers la version anglaise. Je viens de changer le NL en en anglais, mais pour sauver les gens de le faire, lien ici! :) développeur.mozilla.org/en-us/docs/ Web / HTML / ELEMENT / DATALISTE
Donc, fondamentalement, une zone de texte vous pouvez saisir et obtenir une liste de possibilités correspondantes à partir d'une liste déroulante?
Si c'est ce que Marc B décrit peut-être simplement utiliser un dataliste
@Marc, pas vraiment. Je veux avoir une entrée et une descente. La liste déroulante serait des termes de recherche tels que "clients, contacts, numéros de téléphone" et le texte d'entrée se rapporterait à n'importe quel terme de recherche que vous sélectionnez. Je pourrais simplement mettre une entrée à l'écran, puis une descente à côté et accomplir la même chose, mais je veux insérer le menu Select dans la frontière Select car je pense que cela ressemblerait vraiment à Slick.