Textarea with underline (component whole width) text

Question

I need a textarea as follows :

Zoan

Answer 1

You can use linear gradients:

textarea{
        background-attachment: local;
        background-image:
            linear-gradient(to right, white 10px, transparent 10px),
            linear-gradient(to left, white 10px, transparent 10px),
            repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
        line-height: 31px;
        padding: 8px 10px;
        width: 500px;
        }

<textarea></textarea>

Incision

@Dream Bold, increasing font size and other styling make underline position wrongly. – Zoan

Did you increase the font size for the textarea? – Incision

repeating-linear-gradient( white, white 35px, #ccc 35px, #ccc 36px, white 36px ) Change these values according to the lineheight – Incision

codepen.io/dreambold/pen/OJZwgBm?editors=1100 – Incision