Gibt es eine Möglichkeit, ein HTML-HTML-Element um ein HTML-Element zu wickeln? In meinem Fall möchte ich das Textfeld um das Etikett wickeln. DieseWickeln Sie das Textfeld um ein HTML-Element
ist das, was ich versuche zu erreichen:
Label name: *********
*********************
*********************
Wo der * den Textbereich ist.
Sie können nicht HTML Tags innerhalb <textarea> verwenden, aber Sie können absolute Positionierung verwenden, um das Etikett an der gewünschten Position zu platzieren.
Dann können Sie die CSStext-indent Eigenschaft (more info on MDN) die erste Zeile des Textbereiches zu kompensieren, so dass die Beschriftung es nicht überlappen.
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 Minuten schneller als ich! –
@SalmanA das ist ziemlich nah! Ich würde den gleichen Schnitt wie Sie auf der Frage machen, aber Sie waren schneller als ^^ –
Wow, es funktioniert, ich war ratlos über diese Text-Einzug-Eigenschaft. Vielen Dank! – Canutza
Sie könnten versuchen, das Etikett in einem div-Element zu platzieren, stellen Sie die div editierbar und das Etikett nicht bearbeitet machen ...
Etwas wie folgt aus:
<div onClick="this.contentEditable='true';">
<label onClick="this.contentEditable='false';">text 1</label>
text 2
</div>
Danach brauchen Sie nur Ordnen Sie Ihr Label und div mit css an und verwenden Sie die Informationen innerhalb des div (ohne das Label) als Text in einem Textfeld.
Hier ist ein jsfiddle, um zu sehen, wie es funktionieren würde.
+1 für eine andere Perspektive –
@Nisha Danke, ich versuche, die Positionierung so weit wie möglich zu vermeiden, um zu verhindern, dass es schief geht, wer weiß, welcher Browser/Betriebssystem. Aber ich gebe zu, dass die anderen Antworten nicht das Problem haben, etwas vom Text zu kratzen. –
Die CSS-Lösung ist ziemlich solide und ich möchte sie für eine Drupal-Website verwenden, die mir das nicht erlauben würde, aber danke trotzdem! – Canutza
Ich bin nicht sicher, wie gut die text-indent Eigenschaft auf Textfeldelemente funktioniert. Wenn es gut genug funktioniert, können Sie dies tun:
text-indent Eigenschaft, um die erste Textzeile in Textfeld einrücken<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;
}
uns e die text-indent Eigenschaft. Ändern Sie den text-indent Wert gemäß Ihrer Anforderung.
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;
}
OUTPUT
@Salman A, dank f oder Bearbeiten, ich hatte Mühe, es so aussehen zu lassen – Canutza
nicht klar, was Sie wollen, das Textfeld sieht aus wie ein Block mit rechteckiger Form, es kann nicht als ein Inline-Element behandelt werden. –