CSS : 更改输入 (type="text") 以便文本从输入的开头开始

Question

我有以下简单的 html 代码：

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

这是它的 LESS 代码：

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

  input {
    display: table-cell;
    width: 100%;
    height: 100%;

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

它给了我以下结果，其中占位符位于 input 元素的中心：

如果我输入，文本也会从元素的左中开始：

如何更改我的 Less/CSS 代码，以便占位符（以及我编写的任何文本）显示在 input 元素的左上角，如下所示：

Answer 1

只需将 text-align: left; vertical-align: top; 添加到占位符 css。 text-align: left; 会将文本移到左侧，vertical-align: top; 移到顶部。

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

  input {
    display: table-cell;
    width: 100%;
    height: 100%;

    &::placeholder {
        color: #2ea8b0;
        opacity: 1;
        text-align: left;
    }
  }
}

您的问题是由 display: table-cell; G-Cyrillus 正确说明的 asn 引起的

Answer 2

如果您不想使用文本区域，请按以下方式处理：https://codepen.io/julienduvart/pen/zYwLPmQ

.contact-form-help-text {
  margin-top: 15px;
  width: 440px;
  height: 140px;
  display: table;
  // moving the border input in the parent
  border : 1px solid #000;

  input {
    display: table-cell;
    width: 100%;
    // removing the border of the input
    border: none;
    outline: none;
    // apply a strict width (padding or border will not affect the width)
    box-sizing: border-box;

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

<!-- change the div to label so you can focus on the input when clicking on the parent container --> 
<label class="contact-form-help-text">
   <input type="text" placeholder="How We Can Help You?" />
</label>

Answer 3

你需要一个文本区域，而不是输入

<div class="contact-form-help-text">
   <textarea class="wideInput" placeholder="type text here"></textarea>
</div>


.wideInput{
    text-align: left;
    padding-left:0;
    padding-top:0;
    padding-bottom:0.4em;
    padding-right: 0.4em;
    width: 400px;
    height: 200px;
}

CSS : 更改输入 (type="text") 以便文本从输入的开头开始

CSS : Change input (type="text") so that the text start from the beginning of the input

html

css

input

less