Come posso mostrare le linee in una texarea per renderlo simile al blocco note?

Ho bisogno di mostrare linee nella mia area di testo per renderlo simile a un blocco note. Ho solo una singola area di testo. Il blocco note sottostante è un riferimento.Come posso mostrare le linee in una texarea per renderlo simile al blocco note?

enter image description here

fonte

2012-02-15 Anshul

.box { sfondo: #ffffff url (image.gif) no-repeat sinistra; allineamento del testo: centro; } Prova questo –

Ecco un'idea: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

In breve: impostare un background-image e impostare line-height a qualsiasi linea di altezza l'immagine sta usando.

fonte

2012-02-15 08:07:37 Simon

Devi assicurarti di ottenere l'immagine esattamente giusta, però. Gli esempi che altri hanno pubblicato si interrompono dopo poche righe. E l'esempio che hai postato si interrompe non appena c'è una barra di scorrimento. – DisgruntledGoat

Fare in modo che non si rompa è sicuramente la sfida qui. Non l'ho provato da solo, ma sospetto che se hai creato un'immagine di 20px in altezza, l'hai ripetuta come immagine di sfondo e hai impostato l'altezza della linea su 20px e dovrebbe essere allineata. Immagino che vorresti anche stare lontano da "block inline" troppo grandi nel contenuto, che potrebbero potenzialmente spostare l'altezza della linea di un paio di pixel verso il basso. – Simon

Anche lo sfondo deve essere spostato durante lo scorrimento. Altrimenti puoi scorrere mezza linea e il testo è sopra le linee, non tra le righe. – DisgruntledGoat

Questo dovrebbe iniziare:

HTML

<textarea class="text">some text</textarea>

CSS

.text { 
    background: url(http://i.stack.imgur.com/UfzKa.jpg); 
    height: 664px; 
    width: 495px; 
    line-height: 29px; 
    padding-top: 136px; 
    padding-left: 120px; 
}

Demo http://jsfiddle.net/ptpgb/4/

fonte

2012-02-15 08:08:23 PiTheNumber

Perché? Usa un'immagine di sfondo, ecco a cosa serve! –

Grazie per il suggerimento. lo sfondo è migliore, non c'è bisogno di un voto negativo ... – PiTheNumber

Svitato. Non avere paura dei downvotes, considerali come commenti costruttivi per aiutarti a migliorare. Se la tua risposta non è utile/errata, verrai downvoted e notificato. È per questo che lascio sempre un commento quando scrivo meno. Buon editing! –

Aggiunta dovrebbe funzionare un'immagine di sfondo tramite CSS.

textarea{ background-image:url(notepad.png); color:ff0000; }

look at here

fonte

2012-02-15 08:08:35 CyrillC

È possibile farlo con stile CSS, in base alla vostra immagine, si può fare questo:

textarea#area { 
    width: 300px; 
    height: 400px; 
    padding: 0 0 0 20px; 
    line-height: 30px; 
    background: #fff url("http://i.stack.imgur.com/UfzKa.jpg") no-repeat -75px -160px 
}

vedere l'esempio fiddle qui

fonte

2012-02-15 08:08:50 epoch

Sembra più bello se è possibile vedere l'intera immagine: http://stackoverflow.com/a/9289821/956397 – PiTheNumber

Prova questo uno come bene

<style type="text/css"> 
textarea { 
background: url(/source/notebook.png) repeat-y; 
width: 600px; 
height: 300px; 
font: normal 14px verdana; 
line-height: 25px; 
padding: 2px 10px; 
border: solid 1px #ddd; 
} 

</style>

Spero che questo aiuti.

fonte

2012-02-15 08:10:50

questa è una copia esatta del collegamento di Simon ... – epoch

Forse entrambi abbiamo colpito il collegamento contemporaneamente. Ho provato per la prima volta se funziona e poi pubblicato qui. –

certo, non lo stavo dicendo male, stava solo dicendo :). – epoch

È possibile controllare provare

<textarea class="notepad"></textarea> 

.notepad { 
background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y; 
width: 600px; 
height: 300px; 
font: normal 14px verdana; 
line-height: 25px; 
padding: 2px 10px; 
border: solid 1px #ddd; 
}

http://jsfiddle.net/FzFaq/1/

fonte

2012-02-15 08:14:33

Come posso mostrare le linee in una texarea per renderlo simile al blocco note?

risposta

Problemi correlati