Issue
I'm a noob in CSS, sorry if it's a simple thing.
I want to create a striped background for a textarea element (to make it look like a notepad). This can be achieved with the following CSS background rule:
textarea {
width: 100%;
height: 300px;
background: repeating-linear-gradient(white, white 0.9rem, black 0.9rem, black 1rem);
}
<textarea><textarea>
The only problem is that, as can be seen above, as more lines are typed into the textarea, the stripes get out of sync and start to move upwards in relation to the text.
Question: How can I make the repeated stripes always fit perfectly with the font-size?
Solution
Use 1lh
to get the height of one line
textarea {
width: 100%;
height: 300px;
padding: 0; /* there is a default padding */
background: repeating-linear-gradient(#0000 0 calc(1lh - 1px), #000 0 1lh);
/* line-height: 1.5; use this to increase the height of the line */
}
<textarea><textarea>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.