Question

如何在textarea中为所有行加下划线？

P.S。 Textarea的样式为padding: 10px

我无法提供背景信息，因为如果我要滚动此文本区域，文字将显示为like this。

谢谢！

Answer 1

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我认为这可能是背景图片。查看CSS背景或background-image属性，然后将其分配给相关的textarea。

Answer 3

简短回答，无法在textarea中格式化文本。

如果这非常重要，我建议您使用<div contenteditable="true"></div>来设置文本样式（但它可能会粘贴来自粘贴的HTML），然后将我们的innerHTML解析为提交表单时隐藏的输入字段。

Answer 4

通用解决方案

创建两个具有相同样式的div。
第一个div是带有color: transparent; position: absolute的“镜像” div。
第二个div是contenteditable="true"，其中注入了span个元素。
添加任何border-bottom和padding-bottom

Live Demo

CodeSandbox editor（使用Vue，但易于移植到其他任何东西）

注意：contenteditable请务必小心，并确保已将其免受XSS攻击。

如何在textarea中为所有行加下划线？

4 个答案: