我如何在textarea中加下划线？ [英] How can I underline all rows in textarea?

问题描述

我如何在textarea中划下所有行？

我需要某些东西像这样。

PS Textarea的风格 padding：10px

我不能背景，因为如果我滚动这个textarea，文字会看起来像这样 a>。

谢谢！

.notes {background-image：-webkit-linear-gradient（left，white 10px，transparent 10px），-webkit-linear-gradient（right，white 10px，transparent 10px），-webkit-linear-gradient（white 30px ，＃ccc 30px，＃ccc 31px，white 31px）;背景图像：-moz-linear-gradient（左，白色10px，透明10px），-moz-linear-gradient（右，白色10px，透明10px），-moz-linear-gradient（白色30px，#ccc 30px， #ccc 31px，white 31px）;背景图像：-ms-linear-gradient（左，白色10px，透明10px），-ms-linear-gradient（右，白色10px，透明10px），-ms-linear-gradient（白色30px，#ccc 30px， #ccc 31px，white 31px）;背景图像：-o-linear-gradient（左，白色10px，透明10px），-o-linear-gradient（右，白色10px，透明10px），-o-linear-gradient（白色30px，＃ccc 30px， #ccc 31px，white 31px）;线性渐变（左，白10px，透明10px），线性渐变（右，白10px，透明10px），线性渐变（白30px，＃ccc 30px，＃ccc 31px，白31px）;背景大小：100％100％，100％100％，100％31px; border：1px solid #ccc; border-radius：8px; box-shadow：inset 0 1px 2px rgba（0，0，0，0.1）; line-height：31px; font-family：Arial，Helvetica，Sans-serif; padding：8px;}。notes：focus {outline：none;} body {background-color：#eee;}

 < textarea class =notes>< / textarea>  

How can I underline all rows in textarea?

I need in something like this.

P.S. Textarea has style padding: 10px

I can't you background, because if I'll scroll this textarea, text will look like this.

Thank you!

解决方案

.notes {
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 100%, 100% 100%, 100% 31px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 31px;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 8px;
}

.notes:focus {
    outline: none;
}

body {
    background-color: #eee;
}

<textarea class="notes"></textarea>

这篇关于我如何在textarea中加下划线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！