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

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

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