28172 sujets

CSS et mise en forme, CSS3

Input type="text" dont la taille s'adapte au contenu

Bonjour,

Je me pose la question d'un ajustement pus ou moins dynamique de la taille d'un input type="text" qui sert à la recherche en texte libre.

D"abord, si un textarea peut être redimensionné avec une poignée, il me semble que c'est impossible avec un input, même en html 5.

En CSS et sans javascript, peut-on imaginer qu'un input voit sa taille changer au clic de l'utilisateur dans la zone de saisie ?

Encore plus intéressant, je rêve d'un input qui s'agrandirait selon le contenu saisi par l'utilisateur.

Avez-vous des pistes ?
salut,

boteha_2 a écrit :
En CSS et sans javascript, peut-on imaginer qu'un input voit sa taille changer au clic de l'utilisateur dans la zone de saisie ?

Il faut passer par ":focus".

boteha_2 a écrit :
Encore plus intéressant, je rêve d'un input qui s'agrandirait selon le contenu saisi par l'utilisateur.

Quel est l'intérêt d'un truc pareil ?
Bonjour,

Merci de ta réponse.

L'intérêt est d'avoir un champ de saisie qui n'occupe pas trop de place dans la page.

Mais ll'utilisateur doit pouvoir lire toute sa sasie, donc le champ s'aggrandit sous la saisie de l'utilisateur.

Je n'ai pas d'exemple à te montrer mais si on parle de responsive Web c'est le sujet.
Selon la taille du contenu, en full css je ne sais pas, mais on pourrait imaginer un agrandissement si focus sur l'élément. A l'arrachée :
<input type="text" class="laClasse">

.laClasse {
    width: 5rem:
}
.laClasse:focus {
    width: 10rem;
}
Bonjour,

Merci de ta réponse.

Oui, c'est simple.

Je pense tester pendant le week-end, pour voitr un peu l'effet que cela fait.
Un exemple en ligne : CodePen

J'ajoute que cette solution est plus intéressante qu'une solution à partir du contenu seul : vous pouvez ainsi contrôler le design, ça évite de l'exploser...
Modifié par Olivier C (18 Jun 2015 - 16:41)
Bonjour,

Merci, c'est coll.

Je vais faire un test sur la version pour portable d'un site, je te tiens au courant,

Si la taille était augmentée par le contenu, on pourrait imaginer que max-width permette de contrôner le design.
Ce sera peut-être pour CSS 5.

Par ailleurs, il est possible de mettre l'input en position: absolute de façon à ce qu'il n'agisse pas sur le design.
boteha_2 a écrit :
Si la taille était augmentée par le contenu, on pourrait imaginer que max-width permette de contrôner le design. Ce sera peut-être pour CSS 5.

En tout cas vous pouvez optimiser dès maintenant en mettant à max-width:100%, ainsi la div ne dépassera jamais de son conteneur.
Bonjour,

Olivier C a écrit :

En tout cas vous pouvez optimiser dès maintenant en mettant à max-width:100%, ainsi la div ne dépassera jamais de son conteneur.


Oui bien sûr.
Sujet clos
Aller à