在文本区域内显示标签答案

【问题标题】：Displaying Label Inside Text-area在文本区域内显示标签
【发布时间】：2013-05-14 18:44:04
【问题描述】：

我想做一个固定大小的方形文本区域。如下图所示，文本区域的标签会在文本区域的内部。这个标题会一直显示。输入时不会消失文本区域内的文本，如占位符。

我在这个小提琴http://jsfiddle.net/jwB2Y/2/ 中尝试过，但无法将它放在文本区域内..

CSS 代码..

      label 
      { 
         float: top; 
         width:120px;
         padding:10px 10px;
         font-weight:bold;
      }

所需的输出..

【问题讨论】：

由于我无法将标签放置在文本区域内，因此我使用 float:top 属性将其放在其上方..
这个问题与“文本区域顶部的位置标签”问题不同。我需要以不同的方式显示标签，这就是我创建单独问题的原因......
“以不同方式显示标签”是什么意思？

标签： html css forms layout textarea

【解决方案1】：

试试这个；

CSS

.wrapper{
    position:relative; 
    border:1px solid #000;
    overflow:auto;
    display:inline-block;
    width:350px;
    padding:10px;
}
.wrapper .first-heading { 
    width:100%;
    text-align:center;
    font-weight:bold;
    float:left;
    text-decoration:underline;
}
.wrapper .second-heading {
    width:100%;
    text-align:center;
    float:left;
}
.wrapper .textarea1{
    width:100%;
    height:300px;
    float:left;
    display:block;
    border:none; 
    outline:none;   
 }

HTML

<div class="wrapper">
    <label for="qual" >The main heading underlined:</label> 
    <textarea id="qual" rows="5" cols="20" style="resize:none" placeholder="The secondary heading of this space in brackets"></textarea>
</div>

新的 Jsfiddle => http://jsfiddle.net/jwB2Y/7/ 老 Jsfiddle => http://jsfiddle.net/jwB2Y/5/

【讨论】：

我希望辅助标题也不会像这个小提琴 jsfiddle.net/kkctL/3 中看到的主标题一样消失
@Lucy 我按照你想要的方式更改了上面的代码，并且我添加了一个新的 jsfiddle。你能检查一下吗？

【解决方案2】：

我会将所有内容包装在div 中，然后在label 中放置span 以格式化字体：

CSS

div {
  border:1px solid black;
  width:250px;
  height:250px;
  padding:10px;
}
span { 
  display:block; 
  font-weight:bold;
  text-decoration:underline;
}
label {
  display:block;
  margin-bottom:10px;
}
textarea {
  border:none;
  width:100%;
}

HTML

<div>
  <label for="qual"><span>The main heading underlined </span>Sub heading</label>      
  <textarea id="qual" rows="5" cols="20" placeholder="Placeholder text"></textarea>
</div>

查看更新的演示 here。

【讨论】：

【解决方案3】：

我将标签移到 textarea 下并添加了以下 CSS。

http://jsfiddle.net/kkctL/1/

textarea {
    display: block;
    width: 300px;
    height: 300px;
    padding-top: 30px;
}
label { 
    display: block;
    margin: -330px 5px 0 5px;
    width: 290px;
    height: 25px;
    font-weight:bold;
    background-color: white;
}

【讨论】：

@Lucy 想要一个正方形，所以 textarea 的高度应该是 270px 并且标签 margin-top 是 300px
@HighKickX 标签不应该在文本区域内吗？
我希望次要标题也不会像这个小提琴中看到的主标题jsfiddle.net/kkctL/3

【解决方案4】：

将标签绝对定位在文本区域上，然后向文本区域添加一些顶部填充。删除 'float:top' 因为这没有任何作用。

【讨论】：

是的，我在这里进行了更改 jsfiddle.net/jwB2Y/3，但它仍然没有解决我的问题..