代码之家 › 专栏 › 技术社区 › loretoparisi

text带备用行和行号的区域

textarea css html jquery javascript

loretoparisi · 技术社区 · 6 年前

我在画一张画 textarea 有行号的一个非常简单的解决方案如下-请参阅 here 更多细节。

textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  padding-left: 35px;
  padding-top: 10px;
  border-color: #ccc;
}

<textarea rows="10" cols="40"></textarea>

文本区域 使用交替行只是一个简单的

textarea {
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 4rem;
  border: 1px solid #CCC;
  width: 100%;
  height: 400px;
  line-height: 2rem;
  margin: 0 auto;
  padding: 4px 8px;
}

<textarea rows=“10”cols=“40”></textarea>

两种解决方案都可以工作,但是将它们结合起来是很棘手的,因为两者都利用了 background

2 回复 | 直到 6 年前

zgood 6 年前

你可以用包装纸把它们组合起来 textarea div 然后将剥离的背景样式指定给包装div,这样这两个背景就像分层的一样。

textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  padding-left: 35px;
  padding-top: 10px;
  border-color: #ccc;

  font-size: 13px;
  line-height: 16px;
}

.textarea-wrapper {
  display: inline-block;
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 32px;
  background-position: left 10px;
}

<div class="textarea-wrapper">
  <textarea rows="10" cols="40"></textarea>
</div>

我设置的包装分区 display: inline-block 所以它包住了 文本区域

你可能要玩梯度的背景大小,以使它正确地匹配线的高度 文本区域 .

更新根据@DavidThomas的观点,为了帮助文本以交替渐变排列,背景大小高度值应该是textarea行高的2倍(请参阅更新的代码段)。但更难的是要使它与图像编号对齐。

Quentin 6 年前

可以对同一元素使用多个背景。

CSS允许您通过 background-image 财产。

textarea {
  width: 100%;
  min-height: 100px;
  background: url(http://i.imgur.com/2cOaJ.png) top -12px left / auto no-repeat, 
              linear-gradient(#F1F1F1 50%, #F9F9F9 50%) top left / 100% 32px;
  border: 1px solid #CCC;
  box-sizing: border-box;
  padding: 0 0 0 30px;
  resize: vertical;
  line-height: 16px;
  font-size: 13px;
}

body {
  margin: 0;
}

<textarea rows="10" cols="40"></textarea>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前