2012-02-15 14 views
10

Metin alanımda satırları benzer bir not defteri gibi göstermesi için göstermem gerekiyor. Yalnızca tek bir metin alanım var. Aşağıdaki not defteri referans içindir. Kısacası http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/Not defteri gibi görünmesini sağlamak için bir texarea'da satırları nasıl gösterebilirim?

: Bir background-image kurmak ve görüntü kullanıyor olursa olsun satır yüksekliği için line-height set

enter image description here

+2

.box { arka planı: #ffffff url (image.gif) no-repeat sol; metin-align: center; } Bunu deneyin –

cevap

12

İşte bir fikir.

+0

Görüntüyü tam olarak aldığınızdan emin olun. Bazı örnekler, birkaç satır sonra ara verdi. Ve gönderdiğiniz örnek, bir kaydırma çubuğu olduğu anda kırılır. – DisgruntledGoat

+0

Kırılmamaya çalışmak kesinlikle meydan okumadır. Bunu kendim denemedim, ama 20px yüksekliğinde bir görüntü oluşturduysanız, bunu bir arkaplan görüntüsü olarak tekrarlamanız ve satır yüksekliğini de 20px'e ayarlamanızın da hizalanması gerektiğinden şüpheleniyorum. Ayrıca, içeride çok büyük bir satır içi satırdan uzak kalmak isteyebilirsiniz. Bu, satır yüksekliğini birkaç piksel aşağıya kaydırabilir. – Simon

+2

Arka plan da kaydırma yaparken de hareket etmelidir. Aksi takdirde, bir çizginin yarısını kaydırabilir ve metin satırların arasında değil, satırların üzerindedir. – DisgruntledGoat

2

Bu başlangıç ​​olmalıdır:

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/

+5

Neden? Bir arka plan resmi kullanın, işte bunun için var! –

+0

İpucu için teşekkürler. arka plan daha iyidir, aşağı oy gerek yok ... – PiTheNumber

+0

Downvote kaldırıldı. Downvotes'tan korkmayın, onları geliştirmenize yardımcı olacak yapıcı yorumlar olarak düşünün. Cevabınız yardımcı/yanlış değilse, aşağı inin ve bildirilir. Bu yüzden reddettiğimde her zaman bir yorum bırakıyorum. Mutlu düzenleme! –

0

ekleme CSS ile bir arka plan resmi çalışması gerekir.

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

look at here

11

Sen CSS stil ile yapabilirsiniz, resminizin dayalı, bunu yapabilirsiniz:

​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 
}​ 

olarak bu bir deneyin örnek burada

+0

Tüm resmi görebiliyorsanız daha güzel görünüyor: http://stackoverflow.com/a/9289821/956397 – PiTheNumber

1

fiddle Bkz kuyu

<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> 

Bu yardımcı olur umarım.

+0

Bu, Simon'ın bağlantısının tam bir kopyasıdır ... – epoch

+0

Her ikimiz de aynı anda bağlantıya tıkılabilir miyiz? İlk önce çalışıp çalışmayı denedim ve sonra buraya gönderdim. –

+0

emin, kötü bir niyetle söylemiyordum, sadece diyordum :). – epoch

0

denemek kontrol edebilirsiniz

<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/

İlgili konular