入力欄の罫線

Question

罫線入りのノートブックスタイルでinputフィールドを作成しようとしています。どのようにこれを行うことができます。

は、これは、私はそれが見えるようにしたいものです。

Answer 1

あなたは普通のlinear-gradientのようですが、終わりのない繰り返しが容易になりCSS3 repeating-linear-gradient、を利用することができます。

textareaに勾配の背景を生成するには、ハードワンピクセルのカラーストップが必要なルールの色になるようにします。

例：

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

..上記の例では

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>

のような透明な色を使用して、勾配が上から下に行く..makes開始点とし、26ピクセルで透明で終了します。その後、27pxの青色をハードカラーストップとして使用します。この27pxは、textareaに使用されているline-heightと等しくなり、規則内のテキストをきれいに整列させます。

background-attachment: local; - textareaがスクロールバーを取得した場合、コンテンツとともに背景がスクロールします。

borderとoutlineを削除すると、ノートブックの罫線のようになります。