如何修改LESS/CSS让text类型input的文字从左上角开始显示

问题原因 #

• 你现有LESS代码中的类选择器遗漏了.前缀，导致父容器样式无法正确命中对应DOM元素
• 父容器设置display: table、子input设置display: table-cell时，table-cell元素默认vertical-align属性值为middle，会让内部内容垂直居中显示
• 额外说明：原生<input type="text">是单行输入控件，即便设置了较大高度也无法支持多行输入自动换行，如果你需要多行输入场景，建议将HTML中的input替换为<textarea>标签，语义和适配性更好。

代码修改 #

方案1：保留现有input标签结构 #

/* 补充类选择器的.前缀 */
.contact-form-help-text {
  margin-top: 15px;
  width: 440px;
  height: 140px;
  display: table;

  input {
    display: table-cell;
    width: 100%;
    height: 100%;
    /* 新增垂直顶部对齐，让内容从顶部开始显示 */
    vertical-align: top;
    /* 可选：调整内边距控制内容和边框的距离，要完全贴左上角可设为0 */
    padding: 8px;
    box-sizing: border-box; /* 避免padding撑大输入框的实际尺寸 */

    &::placeholder {
        color: #2ea8b0;
        opacity: 1;
    }
  }
}

方案2：更换为textarea（更适配大高度输入场景） #

先修改HTML代码：

<div class="contact-form-help-text">
   <textarea placeholder="How We Can Help You?"></textarea>
</div>

对应LESS代码：

.contact-form-help-text {
  margin-top: 15px;
  width: 440px;
  height: 140px;

  textarea {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    /* 可选：关闭textarea默认的拖拽调整尺寸功能 */
    resize: none;

    &::placeholder {
        color: #2ea8b0;
        opacity: 1;
    }
  }
}

内容的提问来源于stack exchange，提问作者Daniel_Kamel