div redimensionnable comme zone de texte

Question

Les navigateurs permettent de redimensionner les zones de texte en faisant glisser leur coin par défaut. Je me demandais si cette règle pouvait être appliquée à d'autres éléments (un div par exemple). Je sais que cet effet pourrait être obtenu en utilisant la fonction jQuery draggable ou jQuery-ui resizable, mais je voudrais le faire avec du html/css ordinaire s'il est possible d'éviter de se fier à cela bibliothèque. Y a-t-il des règles CSS que je pourrais appliquer à un div pour le faire se comporter de cette façon?

Si vous avez une autre solution, j'aimerais l'entendre.

Answer 1

Utilisez la propriété css3 resize .

div {
    resize: both;
}

Il y a aussi resize: horizontal et resize: vertical.

---

Pas actuellement multi-navigateur http://caniuse.com/#feat=css-resize

Answer 2

Vous pouvez le faire en utilisant CSS3. Vous pouvez créer une balise div redimensionnable par l'utilisateur en définissant les styles de redimensionnement et de débordement. J'ai défini le redimensionnement à la fois horizontal et vertical ici:

.isResizable {
  background: rgba(255, 0, 0, 0.2);
  font-size: 2em;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
  width: 160px;
  height: 120px;
  min-width: 120px;
  min-height: 90px;
  max-width: 400px;
  max-height: 300px;
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>