Eingestellte Zeilen im Eingabefeld

Question

Ich versuche, ein input Feld mit einem Notebook-Stil der Regeleinträge zu machen. Wie kann das gemacht werden?

Dies ist, was ich will es aussehen:

Answer 1

Sie Verwendung von CSS3 repeating-linear-gradient, die wie eine normale linear-gradient gerade ist machen konnte, aber endlos wiederholt einfach macht.

Verwenden Sie dies, um einen Farbverlauf Hintergrund auf einem textarea mit harten Ein-Pixel-Farb-Stop für die Farbe der Regel, die Sie haben wollen, zu generieren.

Beispiel:

label, textarea { 
 
    font-family: sans-serif; 
 
    font-size: 15px; line-height: 27px; 
 
    padding: 0px 5px; margin: 8px; 
 
} 
 
label { font-weight: bold; } 
 
textarea { 
 
    border: none; outline: none; 
 
    background: repeating-linear-gradient(
 
    to bottom, transparent, transparent 26px, #33d 27px 
 
); 
 
    background-attachment: local; 
 
}

<label>General Business Information</label><br/><br/> 
 
<textarea rows="8" cols="50"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
</textarea>

Im Beispiel oben ..

repeating-linear-gradient(to bottom, transparent, transparent 26px, #33d 27px)

der Gradient von oben nach unten gehen ..makes, verwendet eine transparente Farbe wie der Startpunkt und endet dann bei 26 Pixel transparent. Es verwendet dann eine blaue Farbe bei den 27px als einen harten Farbstopp. Dieser 27px wird dem line-height, der für den textarea verwendet wird, gleich gemacht, um den Text innerhalb der Regeln ordentlich auszurichten.

background-attachment: local; - lässt den Hintergrund mit Inhalt scrollen, wenn der textarea Bildlaufleisten erhält.

Entfernen von und outline, es sieht aus wie ein Notebook liniert.