如何增加输入字段的高度，以便占位符文本完全显示在输入框 HTML5 中

Question

我想增加输入框的高度，以便我的占位符文本换行并且完全可以阅读。但是，我的 css 似乎不起作用！有任何想法吗？？

这是屏幕名称的 hmtl5

<tr>
    <th class='row_header requiredfield'>Screen Name*</th>
    <td><input class="large_width tall_height" id="screen_name" type="text" name="screenname" value="{{screenname}}" placeholder="Put in a name others can understand if you don't want to use your actual name."/>
    </td>
</tr>

这是CSS：

.large_width {
    width:250px;
    height: 25px;
}   

.tall_height {
    height: 50px;
}

input {
    font-size: 14px;
    font-family: "Helvetica Neue";
}

input[placeholder] {
    font-size: 11px;
}

Answer 1

使输入的高度和占位符的行高相同。例如

CSS：

.input-class
{
  height:30px;
}

.input-class[placeholder]
{
  line-height:30px;
  font-size:22px;
}