html - 在文本区域内显示标签

Question

我想制作一个固定大小的方形文本区域。文本区域的标签将在文本区域内，如下图所示。此标题将始终显示。在输入文本时不会消失文本区域，如占位符。

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

CSS代码..

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

所需的输出..

Answer 1

我将标签移动到 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;
}

Answer 2

尝试这个;

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/

Answer 3

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

Answer 4

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

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>

在此处查看更新的演示。