Question

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

我已经拥有的名称和电子邮件字段：

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

但我似乎无法修复消息部分......？我认为这将是一个带有一些造型的textarea，但我似乎没有得到正确的效果......是否可以分别为每一行设置样式？

谢谢！

Answer 1

使用textarea使用点图像作为背景。

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

Answer 2

只添加此

sudo yum install phpmyadmin

没有使用图片，网页的大小更多。

Answer 3

您可以添加div而不是textarea，并在其中添加多个输入标记。使用JSFiddle https://msdn.microsoft.com/en-us/dd255234.aspx试试这个

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>

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

3 个答案: