Unusual Shape of a Textarea

Unusual shape of a textarea?

Introduction

First, there are many solutions, proposed in other posts. I think this one is currently (in 2013) the one which can be compatible with the largest number of browsers, because it doesn't need any CSS3 properties. However, the method will not work on browsers which doesn't support contentdeditable, be careful.

Solution with a div `contenteditable`

As proposed by @Getz, you can use a div with contenteditable and then shape it with some div on it. Here is an example, with two blocks which float at the upper left and the upper right of the main div:

The result with Firefox 28

As you can see, you have to play a little with the borders if you want the same result as you requested in your post. The main div has the blue border on every side. Next, red blocks has to be sticked to hide top borders of the main div, and you need to apply border to them only on particular sides (bottom and left for the right block, bottom and right for the left).

After that, you can get the content via Javascript, when the "Submit" button is triggered for example. And I think you can also handle the rest of the CSS (font-size, color, etc.) :)

Full code sample

.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>

Wrap textarea input around a div

I found this pretty ancient discussion:
Unusual shape of a textarea?

The answer that is given is to use the contenteditable property on a div.

I manage to get this code that seems to be what you're looking for.

<html>
<head>  <title></title>  <meta charset="utf-8" />
  <style>    #wrapper {      width: 500px;      height: 500px;    }        #logo {      width: 100px;      height: 100px;      float: right;      background-color: cyan;    }        .textarea {      width: 100%;      height: 100%;    }        <html><head><title></title><meta charset="utf-8" /><style>#wrapper {      width: 500px;      height: 500px;    }        #logo {      width: 100px;      height: 100px;      float: right;      background-color: cyan;    }        .textarea {      width: 100%;      height: 100%;    }  </style></head>
<body>  <div id="wrapper">    <div id="logo">LOGO</div>    <div class='textarea' contenteditable='true'>HTML</div>  </div></body>
</html>
</style></head>
<body>  <div id="wrapper">    <div id="logo">LOGO</div>    <div class='textarea' contenteditable='true'>HTML</div>  </div></body>
</html>

How do I make a Star Wars introduction shaped textarea?

Try a 3D transform:

#starwarstextareaofawesome {
    width:600px;
    height:500px;
    transform:perspective(1000px) rotateX(45deg);
}

Demo

How to create a div with an irregular shape?

THE SVG WAY

Since the shape you request is not possible with only CSS, I suggest you use SVG to draw the shape.

The following piece of code will create the below shape:

<svg height="150" width="150">
    <polygon points="20,10 100,30 120,100 0,100" style="fill:red;" />
</svg>

Show a caret in a custom textarea without displaying its text

Just insert your own caret!

function blink() {  document.getElementById('caret').hidden ^= 1;  blinkTimeout = setTimeout(blink, 500);}var mydiv = document.getElementById('mydiv'),    myta = document.getElementById('myta'),    blinkTimeout = setTimeout(blink, 500),    lastSelectionStart = 0,    lastSelectionEnd = 0,    whichSelection = true;function updateDiv() {  var fc;  while (fc = mydiv.firstChild) mydiv.removeChild(fc);  if (myta.selectionStart != lastSelectionStart) {    lastSelectionStart = myta.selectionStart;    whichSelection = false;  }  if (myta.selectionEnd != lastSelectionEnd) {    lastSelectionEnd = myta.selectionEnd;    whichSelection = true;  }  var cursorPos = whichSelection ? myta.selectionEnd : myta.selectionStart;  for (var i = 0; i < myta.value.length; i++) {    if (i == cursorPos) {      var caret = document.createElement('span');      caret.id = 'caret';      caret.appendChild(document.createTextNode('\xA0'));      mydiv.appendChild(caret);      clearTimeout(blinkTimeout);      blinkTimeout = setTimeout(blink, 500);    }    var span = document.createElement('span');    span.className = Math.random() < 0.5 ? 'green' : 'red';    span.appendChild(document.createTextNode(myta.value[i]));    mydiv.appendChild(span);  }  if (myta.value.length == cursorPos) {    var caret = document.createElement('span');    caret.id = 'caret';    caret.appendChild(document.createTextNode('\xA0'));    mydiv.appendChild(caret);    clearTimeout(blinkTimeout);    blinkTimeout = setTimeout(blink, 500);  }};myta.addEventListener('input', updateDiv);myta.addEventListener('focus', updateDiv);myta.addEventListener('mousedown', function() {  setTimeout(updateDiv, 0);});myta.addEventListener('keydown', function() {  setTimeout(updateDiv, 0);});myta.addEventListener('blur', function() {  document.getElementById('caret').hidden = true;  clearTimeout(blinkTimeout);});

body { position: relative }div, textarea {  -webkit-text-size-adjust: none;  width: 100%;  white-space: pre-wrap;  word-wrap: break-word;  overflow-wrap: break-word;  font: 1rem sans-serif;  padding: 2px;  margin: 0;  border-radius: 0;  border: 1px solid #000;  resize: none;}textarea {  position: absolute;  top: 0;  color: transparent;  background: transparent;}.red { color: #f00 }.green { color: #0f0 }#caret {  display: inline-block;  position: absolute;  width: 1px;  background: #000;}#caret[hidden] { display: none }

<div id="mydiv"><span id="caret"> </span></div><textarea id="myta" autofocus=""></textarea>

URL parsed incorrectly in textarea

You can replace & in > with &. That's simply replace & so it won't be interpreted as >. Maybe example will make more sense:

Before:

After:

&gt

Result:

I don't know if that solves your problem, but it works in the fiddle you sent.

In code:

Sample Image

Result in fiddle:

Sample Image

If you will have the same problem with others htmlentities, here's list of them: https://dev.w3.org/html5/html-author/charref

Unusual Shape of a Textarea