輸入字段中的直線

Question

我正在嘗試使一個input字段具有筆劃樣式的直接輸入。如何才能做到這一點。

這就是我想要它看起來像：

Answer 1

您可以利用CSS3 repeating-linear-gradient，這就像一個普通的linear-gradient但讓無休止的重複容易的。

使用此選項可以在textarea上生成漸變背景，並且對於您想要的規則的顏色，使用硬單像素顏色停止。

實施例：

label, textarea { 
 
    font-family: sans-serif; 
 
    font-size: 15px; line-height: 27px; 
 
    padding: 0px 5px; margin: 8px; 
 
} 
 
label { font-weight: bold; } 
 
textarea { 
 
    border: none; outline: none; 
 
    background: repeating-linear-gradient(
 
    to bottom, transparent, transparent 26px, #33d 27px 
 
); 
 
    background-attachment: local; 
 
}

<label>General Business Information</label><br/><br/> 
 
<textarea rows="8" cols="50"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
</textarea>

在上面的例子..

repeating-linear-gradient(to bottom, transparent, transparent 26px, #33d 27px)

..makes梯度從頂部至底部，使用透明的顏色作爲起點，然後以26像素的透明度結束。然後它在27px處使用藍色作爲硬色停止。這個27px等於用於textarea的line-height，以便整齊排列規則內的文本。

background-attachment: local; - 如果textarea獲取滾動條，則使背景隨內容一起滾動。

刪除border和outline，完成它看起來像筆記本統治表。