css - 垂直对齐占位符文本到顶部

Question

占位符文本显示在中心垂直对齐，这适用于名称和电子邮件字段，但不适用于文本字段。我希望它与顶部对齐(文本字段的高度为 100px)。

这是我使用的 CSS:

form {
    width: 500px;
    margin: 0 auto;
}

input {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    border-radius: 5px;
    padding: 10px;
}

input[type="text"] {
    display: block;
    margin: auto;
    margin-bottom: 15px;
    width: 250px;
    border: 1px solid lightgrey;
}

input[type="submit"] {
    display: block;
    margin: auto;
    width: 272px;
    height: 40px;
    border: none;
    background: steelblue;
    color: white;
}

input[class="text-field"] {
    height: 100px;
}

Answer 1

我假设您希望此文本字段包含多行文本(因为您将其高度设置为 100 像素)，在这种情况下您可能希望使用 <textarea> 反而。该开关应该可以解决您的垂直对齐问题。