小编Mis*_*Bur的帖子

当用户填写我的表单并输入错误的电子邮件和/或电话号码时,我希望在红色错误消息和下面的文本之间留出更多空间.如果有人知道如何实现这一点,我们将非常感谢您的帮助.

的jsfiddle

<form id="contact_form" class="container form-hide" autocomplete="off" autocomplete="false" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" style="background-color: #00AB8E">
              <label>First Name
                <span class="error">Please enter data.</span>
                <input id="tesFN first_name " maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Last Name
                <input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-check-circle" aria-hidden="true"></i>
              </label>
              <label>Email
                <span class="error">Please enter a valid email address</span>
                <input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()" required style="background-color: #30bda6"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
              </label>
              <label>Phone
                <span class="error">Please enter a valid phone number</span> …

我有一个文本框，用户可以在其中输入评论；但是，当用户单击文本框时，键入时光标位于文本框的中间（见图 1）。

如何将光标定位在文本框的左上角，如图#2 所示？

任何帮助将非常感激！

      <form className="comment-form" action="/comments" method="post">
        <input type="hidden"
               name="authenticity_token"
               value={this.props.token}/>

        <label htmlFor="comment[body]">Comment</label>
        <input name="comment[body]" type="textarea" rows="1" cols="50" wrap="physical" id="comment_text_area" />

        <label htmlFor="image[image]">Image</label>
        <input name="comment[image]" type="file" />

      <div className="request-actions">
        <button>Comment on Request</button>
        <a onClick={this.props.closeEditor}>Cancel</a>
      </div>
      </form>

.comments {
  margin: 20px 0;
}

.comment {
  background-color: $light-grey-5;
  padding: rem-calc(10);
  border-bottom: 3px solid White;
  font-size: 13px;
}

.comment__user {
  color: $black;
}

.request__comment {
  margin-bottom: 20px;
}

.comment-form input[type="textarea"] {
    width: 500px;
    height: 150px;
    font-size: 16px;
    border: 2px solid #ccc; …