在文本區域內顯示標籤

我想製作一個固定大小的正方形文本區域。文本區域的標籤將位於文本區域內，如下圖所示。此標題將始終顯示。它不會像佔位符一樣在文本區域內輸入文本。在文本區域內顯示標籤

我試圖在這個小提琴http://jsfiddle.net/jwB2Y/2/，但無法將其放置在文本區域..

的CSS代碼中..

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

所需的輸出..

Desired Output

來源

2013-05-20 Lucy

float：top？ – Nitesh

因爲我無法觸及文本區域內的標籤，所以我使用float：top屬性將它放在它上面。 – Lucy

此問題與「在文本區域頂部放置位置標籤」問題不同。我需要顯示標籤以不同的方式這就是爲什麼我創建了一個單獨的問題... – Lucy

將標籤絕對放置在文本區域上，然後將一些頂部填充添加到textarea。刪除'浮動：頂部'，因爲這沒有做任何事情。

來源

2013-05-20 08:47:25 matpol

是的，我在這裏做了修改http://jsfiddle.net/jwB2Y/3/，但它仍然沒有解決我的問題.. – Lucy

你讀過我的答案嗎？ – matpol

我在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; 
}

來源

2013-05-20 08:49:26 Alles

由於@盧西希望有一個正方形，textarea的高度應該是270px，標籤邊距頂部300px –

@HighKickX標籤不應該在textarea內嗎？ – Alles

它會在它裏面：'http：// jsfiddle.net/HighKickX/kkctL/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/

來源

2013-05-20 08:55:08 midstack

我想在輔助標題也沒有像dissapear中看到這個小提琴jsfiddle.net/kkctL/3 – Lucy

@Lucy主標題我改變了上面的代碼，你所希望的方式，我已經加了新jsfiddle.Can你選擇了它？ – midstack

我想包一大堆的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。

來源

2013-05-20 10:17:49 Xareyo

在文本區域內顯示標籤

回答

相關問題