Esiste un modo per avvolgere un elemento HTML textarea attorno a un elemento HTML? Nel mio caso voglio avvolgere la textarea attorno all'etichetta.Avvolgere la textarea attorno a un elemento HTML
Questo è quello che cerco di ottenere:
Label name: *********
*********************
*********************
Qualora l'* è l'area di testo.
Non è possibile utilizzare tag HTML all'interno di <textarea> ma è possibile utilizzare il posizionamento assoluto per posizionare l'etichetta nella posizione desiderata.
Quindi, è possibile utilizzare il CSStext-indent proprietà (more info on MDN) per compensare la prima riga del textarea con l'etichetta non si sovrapponga esso.
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 minuti più veloce di me! –
@SalmanA che è abbastanza vicino! Stavo per fare la stessa modifica di te sulla domanda, ma eri più veloce allora ^^ –
Wow, funziona, non avevo idea di quella proprietà di rientro del testo. Grazie! – Canutza
Si potrebbe provare a posizionare l'etichetta in un elemento div, rendere il div modificabile e rendere il non modificabile etichetta ...
Qualcosa di simile a questo:
<div onClick="this.contentEditable='true';">
<label onClick="this.contentEditable='false';">text 1</label>
text 2
</div>
Dopo che basta per organizzare la tua etichetta e div con css e utilizzare le informazioni all'interno del div (esclusa l'etichetta) come testo all'interno di una casella di testo.
Ecco uno jsfiddle per dare un'occhiata a come funzionerebbe.
+1 per una prospettiva diversa –
@Nisha Grazie, cerco di evitare il posizionamento il più possibile per evitare che vada storto su chissà quale browser/sistema operativo. Ma ammetterò che le altre risposte non hanno il problema di dover raschiare parte del testo. –
La soluzione CSS è piuttosto solida e voglio usarla per un sito Drupal che non mi permetterebbe di farlo, ma grazie comunque! – Canutza
Non sono sicuro di quanto bene la proprietà text-indent lavora su elementi dell'area di testo. Se funziona abbastanza bene, si può fare questo:
text-indent proprietà per rientrare la prima riga di testo in textarea<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;
}
siamo e la proprietà text-indent. Modificare il valore text-indent secondo i propri requisiti.
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;
}
USCITA
@Salman A, grazie f o modifica, stavo cercando di far sembrare che lo – Canutza
non chiarisca cosa vuoi, la textarea sembra un blocco con una forma rettangolare, non può essere trattato come un elemento in linea. –