Question

我正在尝试以引导程序形式创建一个消息输入框，但是该框必须具有足够的高度，以便用户可以阅读他的消息，“消息”的占位符将保留在中间，也是当我在没有考虑边距的情况下写下它保持横向的文本，我是一个新手程序员，所以请不要太苛刻。

.theform {
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 50px;
  border: 5px solid;
  padding: 20px 20px 20px 20px;
}

.theform h1 {
  font-size: 50px;
  text-decoration: underline;
}

#formGroupExampleInput {
  height: 50px;
}

.form-control {
  font-size: 30px;
}

#messagebox {
  height: 200px;
  margin-right: 40px;
  line-height: 0px;
}

#message {
  height: 200px;
  margin-right: 40px;
  line-height: -20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="theform" id="link3">
  <h1 class="text-center">Contact</h1>
  <form>
    <fieldset class="form-group">
      <label for="formGroupExampleInput">Example label</label>
      <div class="row">
        <div class="col-md-6">
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
        </div>
      </div>
    </fieldset>

    <fieldset class="form-group">
      <label for="formGroupExampleInput2">Another label</label>
      <div class="row">
        <div class="col-md-6">
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
        </div>
      </div>
    </fieldset>

    <fieldset class="form-group">
      <label for="formGroupExampleInput">Example label</label>
      <div class="row">
        <div class="col-md-6">
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
        </div>
      </div>
    </fieldset>

    <fieldset class="form-group">
      <label for="formGroupExampleInput">Example label</label>
      <div class="row">
        <div class="col-md-6">
          <input type="text" class="form-control" id="messagebox" placeholder="Message" size="50">
        </div>
      </div>
    </fieldset>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Answer 1

您必须使用textarea代替input。如果要垂直居中占位符，还必须使用一些JS，只需调整textare即可。

只需查看此codepen以获取垂直居中textarea的示例实现： https://codepen.io/desandro/pen/gICqd

Answer 2

不需要JS

您可以通过放置文本区域来解决此问题：

INSERT INTO ...

默认情况下，在文本区域中，占位符发送到左上角。

不要错误地输入输入，因为当你给它一个巨大的高度时，占位符将被发送到中间的左边！！！

如何创建从输入框顶部开始的占位符？

2 个答案: