Question

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

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

CSS代码..

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

期望输出..

Desired Output

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>

New Jsfiddle =＆gt; http://jsfiddle.net/jwB2Y/7/ Old Jsfiddle =＆gt; http://jsfiddle.net/jwB2Y/5/

Answer 3

将标签完全放在文本区域上，然后在textarea中添加一些顶部填充。删除'float：top'，因为这没有做任何事情。

Answer 4

我会将所有内容包裹在div中，然后在span内放置一个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>

请参阅更新的演示here。

在文本区域内显示标签

4 个答案: