Question

也许有人可以帮我解决这个问题：我正在寻找一个无需javascript的解决方案来显示textarea中的行。 accepted answer here对我不起作用，因为它取决于盒子内固定的线高。

我的textarea看起来像这样：

textarea{
  line-height: 2em;
}

因此仅图像解决方案不起作用。有什么东西，可能是CSS3相关的，可以存档吗？我试过了

background: url('whitepx.png') repeat left 2em #363636;

但是整个textarea白色。

更新

我想我明白了。对不起，如果我不能说清楚我的问题。

这是我的css：

textarea
    {
    width: 100%;
    background-color: #363636;
    border: 1px solid #fff;
    outline: none;
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 0 0 0 1em;
    line-height: 2em;
    font-family: sans-serif;
    resize: none;
    height: 58em;
    width: 530px;
    background-image: -moz-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: -webkit-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: -o-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: -ms-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: repeating-linear-gradient(#363636, #363636 20%, #fff 22%);    
    background-size: 100% 2em;
    background-attachment: local;
}

见fiddle。看起来对我很好。

Answer 1

你可以通过这种方式实现

尝试使用多行box-shadow

检查＆gt; http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/

如何在相对行高的textarea中显示行？

1 个答案: