web-dev-qa-db-fra.com

Comment forcer un redimensionnement CSS libre sur un élément en entrée lorsque sa largeur est spécifiée?

J'ai un problème simple - élément d'entrée de texte qui a spécifié 2 attributs CSS, voir code ci-dessous:

<input type="text" style="resize:horizontal; width:200px" />

Lorsque seul l'attribut resize est spécifié, la variable input peut être redimensionnée à n'importe quelle largeur. Cependant, si j'ai width spécifié, l'élément input ne peut être redimensionné que plus large que 200px, pas plus court. 

Existe-t-il un moyen de spécifier la largeur par défaut tout en ayant un élément d’entrée redimensionnable à n’importe quelle largeur? Plus large ou plus court que celui défini par l'attribut width?

Merci d'avance pour toute aide!

EDIT - clarification: j'ai besoin que l’élément d’entrée soit redimensionnable librement - sur n’importe quelle largeur - plus que 200px et moins que 200px

EDIT 2 - Je recherche de préférence une solution CSS pure si cela est possible. 

htmlcsscss3
11
Frodik

C'est assez proche de réalisable. Vous devez définir size="1" en tant qu'attribut sur le <input> pour redimensionner très petit. Le redimensionnement est contrôlé par input:active, qui remplace la classe de base par width: auto;. input:focus l'empêche de se réduire lorsque vous tapez dessus. 

Problèmes potentiels: input:focus force le <input> à un min-size spécifique, qui peut être plus volumineux que ce à quoi il a été redimensionné. Vous pouvez utiliser min-width: 100% pour en faire une "fonctionnalité" au lieu d'un problème, en donnant à l'utilisateur plus d'espace pour taper. Si le <input> a le focus, le redimensionnement est toujours limité par le min-width, mais le redimensionnement est généralement effectué après la focalisation (et aussi, principalement pour agrandir quelque chose).

Démo: http://jsfiddle.net/ThinkingStiff/jNnCW/

HTML (avec les styles en ligne que vous avez demandé):

<input id="text" type="text" size="1"/>
<style>
    input {
        resize: horizontal;
        width: 200px;
    }

    input:active {
        width: auto;   
    }

    input:focus {
        min-width: 200px;
    }
</style>
12
ThinkingStiff

Voici un exemple d'utilisation de div avec flexbox & contenteditable = true au lieu de input. Seulement CSS + HTML. Je l'ai trouvé utile si aucune balise 'form' n'est requise.

#flex {
  display: flex;
  display: -webkit-flex;
  line-height: 30px;
}
#inner {
    padding: 0 20px;
    min-width: 100px;
    height:30px;
    line-height:30px;
    outline:none;
    background-color: #dfd4d7;
}
<div id="flex">Type some text here:
<div id="inner" contenteditable="true" spellcheck="false"><div>
</div>

5
snowerest

Tout ce que je lis en ligne (voir ci-dessous) indique que la propriété resize ne fonctionne que sur les éléments de niveau bloc qui ne possèdent pas ont overflow: visible défini et sur les éléments textarea. Cela ne fonctionne même pas techniquement pour les éléments input (qui ne sont ni l'un ni l'autre, et même si défini sur display: block, je ne pouvais pas obtenir que resize soit reconnu par Firefox).

Liens: https://developer.mozilla.org/en/CSS/resize et http://www.css3.info/preview/resize/ et http: //www.w3 .org/TR/css3-ui/# redimensionner

1
ScottS

Le moyen le plus simple de redimensionner librement input consiste à lui attribuer la valeur width: 100%, puis de le placer dans un conteneur inline-block avec un min-width (min-width définit la largeur par défaut de input). Redimensionnez le conteneur pour redimensionner la input.

Voir: http://jsfiddle.net/Wexcode/TvZAr/

0
Wex