创建在每一行上点缀的文本区域

Question

我想制作一个这样的联系表：http://line25.com/wp-content/uploads/2012/letter-form/20.jpg（一个多行文本区域，其中每行都有一个虚线底部边框，就像笔记本一样。所以不仅仅是字段的底部边框)

我已有的姓名和电子邮件字段：

#contactform input[type="text"]{
   border: none;
   border-bottom: dashed 2px #c9c9c9;
   width: 200px;
}

但我似乎无法修复 message 部分...？我认为这将是一个带有一些样式的文本区域，但我似乎没有得到正确的效果...是否可以单独设置每一行的样式？

谢谢！

Answer 1

textarea 使用点图像作为背景。

#contactform textarea {
    background: url("dot-bg.png");
}

Answer 2

仅添加此

 <input type="text" class="field-name" value=""/>

 <textarea class="field-message"></textarea>

   input[type="text"].field-name{
   border-bottom: dashed 2px #c9c9c9;
   width: 300px;
   }

   textarea.field-message{
   border-bottom: dashed 2px #c9c9c9;
   width: 300px;
   resize:none;
   }

不使用图片，网页大小比较多

Answer 3

您可以添加一个 div 而不是文本区域，并在其中添加多个输入标签。工作 JSFiddle https://jsfiddle.net/n16vrqda/ 试试这个

label{
      margin-right: 22px;
}

.message{
    float: left;
  margin-top: 10px;
      margin-right: 10px;
}

input[type="text"].field-name{
    border:none;
   border-bottom: dotted 2px #c9c9c9;
   width: 300px;
    margin:10px;
   }

   .field-message{
       float:left;
   }

<label>Name : </label>
<input type="text" class="field-name" value=""/><br>
<label>Email : </label>
<input type="text" class="field-name" value=""/><br>
<div>
    <label class="message">Message : </label>
    <div class="field-message">
        <input type="text" class="field-name" value=""/><br>
        <input type="text" class="field-name" value=""/><br>
        <input type="text" class="field-name" value=""/><br>
    </div>
</div>

创建在每一行上点缀的文本区域

Create text-area dotted on each line

html

css

textarea

border