代码之家 › 专栏 › 技术社区 › 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>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前