将 textarea 包裹在 HTML 元素周围答案

【问题标题】：Wrap the textarea around a HTML element将 textarea 包裹在 HTML 元素周围
【发布时间】：2014-06-11 08:58:56
【问题描述】：

有什么方法可以将 textarea HTML 元素包裹在 HTML 元素周围？就我而言，我想将 textarea 包裹在标签周围。

这是我试图实现的目标：

Label name: *********
*********************
*********************

其中 * 是文本区域。

【问题讨论】：

@Salman A，感谢您的编辑，我努力让它看起来像这样
不清楚你想要什么，textarea看起来像一个矩形块，它不能被视为内联元素。

标签： html css textarea

【解决方案1】：

您不能在<textarea> 中使用HTML 标签，但可以使用绝对定位将标签放置在所需位置。

然后，您可以使用 CSS text-indent 属性 (more info on MDN) 来偏移 textarea 的第一行，这样标签就不会与它重叠。

div {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  width: 115px;
  line-height: 1em;
}

textarea {
  text-indent: 120px;
  margin: 0;
  line-height: 1.2em;
}

<div>
  <label>This is the label :</label>
  <textarea cols="30" rows="10"></textarea>
</div>

【讨论】：

比我快 2 分钟！
@SalmanA 非常接近！我打算对问题进行与您相同的编辑，但您的速度比之前快^^
哇，它起作用了，我对那个 text-indent 属性一无所知。谢谢！

【解决方案2】：

您可以尝试将标签放置在 div 元素中，使 div 可编辑并使标签不可编辑...

类似这样的：

<div onClick="this.contentEditable='true';">
  <label onClick="this.contentEditable='false';">text 1</label>
  text 2
</div>

之后你只需要用css排列你的标签和div，并将div内的信息（不包括标签）用作文本框内的文本。

这里有一个jsfiddle 来看看它是如何工作的。

【讨论】：

@Nisha 谢谢，我尽量避免定位，以防止它在谁知道什么浏览器/操作系统上出错。但我承认其他答案没有刮掉一些文字的问题。
CSS 解决方案非常可靠，我想将它用于不允许我这样做的 Drupal 网站，但还是谢谢你！

【解决方案3】：

我不确定 text-indent 属性在 textarea 元素上的效果如何。如果效果足够好，您可以这样做：

使用定位将标签与文本区域的左上角对齐并设置固定宽度
使用text-indent属性在textarea中缩进第一行文本

Demo here

<div class="position-helper">
    <label>Label name:</label>
    <textarea></textarea>
</div>

.position-helper {
    position: relative;
}
.position-helper label {
    position: absolute;
    left: 1px;
    top: 1px;
    background-color: #F0F0F0;
    /* font-size normalized so that em values match */
    font-size: 16px;
    width: 10em;
}
textarea {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    /* font-size normalized so that em values match */
    font-size: 16px;
    text-indent: 10em;
}

【讨论】：

【解决方案4】：

使用text-indent 属性。根据您的要求修改text-indent 值。

HTML：

<div>
    <label><b>Label name:</b></label>
    <textarea name="textarea1" id="" cols="30" rows="10" placeholder="PlaceHolder Text For the Text Area"></textarea>
</div>

CSS：

div 
{
    position:relative;
}
label {
    position:absolute;
    top:0;
    left:0;
    border:0;
}
textarea {
    text-indent:90px;
    margin:0;
     border:1px solid blue;    
}

输出

【讨论】：