具有交替行和行号的Textarea [英] Textarea with alternate rows and line numbers

问题描述

我正在尝试绘制具有交替行和行号的 textarea .具有行号的一个非常简单的解决方案如下:有关更多信息，请参见此处详细信息.

I'm trying to draw a textarea with alternate rows and line numbers. A very simple solution to have line numbers is the following - see here for more details.

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 和交替的行只是一个简单的

While to have a textarea with alternate rows is just a simple as

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 来破解行号和备用行背景.

Both solutions works ok, but combining them it's tricky since both makes use of the background to hack the line numbers and the alternate rows background.

推荐答案

您可以通过将 textarea 包裹在 div 中来组合它们，然后将剥离的背景样式分配给该样式包装div，因此2个背景就像是分层的.

You could combine them by wrapping your textarea in a div then assign the stripped background styles to that wrapping div, so the 2 backgrounds are like layered.

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 的环绕div，因此它像一个内联元素一样包裹 textarea ，我将背景渐变从顶部定位10像素以说明你顶一下.

The wrapping div I set to display: inline-block so it wraps the textarea like an inline element and I positioned the background gradient 10px from the top to account for you padding-top.

您可能必须使用渐变的背景大小才能使其正确匹配 textarea 的行高.

You may have to play with the background size of the gradient to get it to properly match the line-height of the textarea.

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

UPDATE To @DavidThomas's point, to help line up your text with the alternating gradient the background-size height value should be 2 times the line-height of the textarea (see updated snippet). But the harder thing is to make it line up with the image numbers.

这篇关于具有交替行和行号的Textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！