使用HTML，CSS和创建一个倒计时计时器，目前学员是在输入框的最左边，我希望文本开始出现在相同的位置作为占位符，然后我键入的值。

.name-box {
  width: 100%;
}

.name-box input {
  width: 100%;
  height: 40px;
  margin: 10px 0px 10px 0px;
  border: none;
  outline: none;
  border-radius: 15px;
}

.name-box input::placeholder {
  font-size: 18px;
  color: gray;
  padding: 0px 0px 0px 15px;
}

<div class="details-box">
  <h2>Enter Your Details</h2>
  <form action="">
    <div class="name-box">
      <input type="text" id="firstName" required placeholder="Name of Recepient">
    </div>

    <div class="date-box">
      <input type="text" for="inputDate" id="inputDate" placeholder="YYYY-MM-DD">
    </div>

    <div class="message-box">
      <textarea placeholder="Message you want displayed" for="message" id="message" cols="50" rows="8"></textarea>
    </div>
    <div class="buttons">
      <div class="button">
        <input type="submit" id="submitButton" value="Submit">
      </div>
      <div class="button">
        <input type="reset" id="resetButton" value="Reset">
      </div>
    </div>
  </form>
</div>