Forme inhabituelle d’un textarea ?

Question

Textareas sont habituellement rectangulaires ou carrées, comme ceci :

Mais je veux un textarea en forme personnalisée, comme ça, par exemple :

Comment est-ce possible ?

Answer 1

Introduction

Tout d'abord, il existe de nombreuses solutions, proposées dans d'autres posts. Je pense que celui-ci est actuellement (en 2013), le seul qui peut être compatible avec le plus grand nombre de navigateurs, parce qu'il n'a pas besoin de toutes les propriétés CSS3. Cependant, la méthode ne fonctionne pas sur les navigateurs qui ne supportent pas contentdeditable, être prudent.

Solution avec un div contenteditable

Proposé par @Getz, vous pouvez utiliser un div avec contenteditable puis forme avec de la div. Voici un exemple, avec deux blocs qui flottent dans le coin supérieur gauche et le coin supérieur droit de la div principale:

Comme vous pouvez le voir, vous avez à jouer un peu avec les frontières si vous voulez le même résultat que vous avez demandé dans votre post. La div principale a la bordure bleue sur chaque côté. Ensuite, les blocs rouges doit être collé à masquer les haut frontières de la div principale, et vous avez besoin d'appliquer une bordure à eux seuls sur les côtés (en bas et à gauche pour le bloc de droite, en bas et à droite pour la gauche).

Après cela, vous pouvez obtenir le contenu via Javascript, lorsque le "Soumettre" bouton est déclenchée par exemple. Et je pense que vous pouvez également gérer le reste de la CSS (font-size, color, etc.) :)

Exemple de code complet

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}

<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>

Answer 2

Dans un avenir proche, nous pouvons utiliser css-shapes pour atteindre cet objectif. Un div avec l' contenteditable attribut true combiné avec css-shapes peut faire une zone de texte de tout type de forme.

Actuellement, Chrome Canary déjà soutient css-shapes. Un exemple de ce qui est possible avec les css-formes est:

Ici, ils sont à l'aide d'un polygone de forme pour définir le texte de flux. Il devrait être possible de créer deux polygones pour correspondre à la forme que vous voulez pour votre textarea.

Plus d'informations sur l' css-shapes a été écrit à: http://sarasoueidan.com/blog/css-shapes/

Pour activer les feuilles de style css formes dans Chrome Canary:

1. Copier et coller chrome://flags/#enable-expérimental-le web de la plate-forme de fonctionnalités dans le la barre d'adresse, puis appuyez sur enter.
2. Cliquez sur " Activer le lien à l'intérieur de cette de la section.

3. Cliquez sur la Relance Maintenant " bouton au bas de la fenêtre de navigateur.

   de: http://html.adobe.com/webplatform/enable/

HTML

<div class="container" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS

.container{   
  overflow:hidden;
  shape-inside: polygon(200.67px 198.00px,35.33px 198.47px,34.67px 362.47px,537.00px 362.74px,535.67px 196.87px,388.33px 197.00px,386.67px 53.53px,201.33px 53.53px);
  font-size: 0.8em;
}

/** for red border **/

.container:before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 190px;
    height: 190px;
    background-color: white;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
}

.container:after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 190px;
    height: 190px;
    background-color: white;
    border-left: 1px solid red;
    border-bottom: 1px solid red;
}

Polygone créé avec: http://betravis.github.io/shape-tools/polygon-drawing/

Résultat

http://jsfiddle.net/A8cPj/1/

Answer 3

Peut-être que c’est possible avec Contenu modifiable ?

Il n’est pas un composant textarea, mais si vous réussissez à créer une div avec cette forme, il pourrait travailler.

Je pense qu’il n’est pas possible avec textarea juste...

Un petit exemple : http://jsfiddle.net/qgfP6/5/

Answer 4

Vous pouvez travailler avec un div contentEditable a, avec deux coins divs :

Voir ce jsfiddle

Answer 5

Vous pourriez aussi le faire avec du CSS Régions

Avec les Régions, vous pouvez utiliser les propriétés CSS de flux de contenu dans les style des conteneurs, tout en précisant l'ordre de récipient que vous choisissez, indépendamment de leur position sur la page.

(Plateforme Web)

[Actuellement pris en charge dans WebKit tous les Soirs, Safari 6.1+ et iOS7 et déjà utilisable en chrome et opéra d'après l'activation de l'indicateur: activer-expérimental-web-plateforme-caractéristiques - caniuse, Plate-forme Web ]

VIOLON

Donc, vous pourriez faire qui textarea forme en faisant circuler le texte par le biais de 2 régions, et de le modifier en ajoutant contenteditable sur le contenu.

Balisage

<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>

(Pertinent) le CSS

#content {
     -ms-flow-into: article;
    -webkit-flow-into: article;
}

.region {
    -ms-flow-from: article;
    -webkit-flow-from: article;
    box-sizing: border-box;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 0 1px;
    margin: auto;
    left:0;right:0;
    border: 2px solid lightBlue;
}

#box-a {
    top: 10px;
    background: #fff;
    z-index: 1;
    border-bottom: none;
}

#box-b {
    top: 210px;
    width: 400px;
    overflow: auto;
    margin-top: -2px;
}

Le résultat:

Pour plus d'informations sur les régions - voici un bon article: CSS3 régions: Riche de mise en page avec HTML et CSS3