通常情况下,textareas只是枯燥的老长方形:

但是,是否有可能形成类似于星球大战入门的文本区域?

**注意:灵感来自SO#20734620:textarea的异常形状 - 请注释.*
更新:感谢Niet the Dark Absol我能够让它运转起来.只需要玩字体和颜色.

textarea {
width:600px;
height:500px;
transform:perspective(1000px) rotateX(45deg);
display:block;
margin:0 auto;
text-align: center;
line-height:200%;
color: yellow;
background-color: black;
font-size: 1.75em;
}
Run Code Online (Sandbox Code Playgroud) 我有一个自定义textarea.在这个例子中,它随机地使字母变为红色或绿色.
var mydiv = document.getElementById('mydiv'),
myta = document.getElementById('myta');
function updateDiv() {
var fc;
while (fc = mydiv.firstChild) mydiv.removeChild(fc);
for (var i = 0; i < myta.value.length; i++) {
var span = document.createElement('span');
span.className = Math.random() < 0.5 ? 'green' : 'red';
span.appendChild(document.createTextNode(myta.value[i]));
mydiv.appendChild(span);
}
};
myta.addEventListener('input', updateDiv);Run Code Online (Sandbox Code Playgroud)
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; …Run Code Online (Sandbox Code Playgroud)