如何设置表单字段内文本的样式？

Question

我正在尝试定位“消息”字段中输入的实际文本。当您输入较长的消息时，它不会换行，而是在同一行上继续（请参见下面的屏幕截图）

我尝试使用 [type="value"] 通过 CSS 来定位它，我什至尝试了 [type="text"} 但我无法让它工作。有什么想法出了什么问题吗？

#retirement-services input[type="value"]{
text-wrap: wrap;
max-width: 300px;
}

        <div id="rs-retirement-services">
        <fieldset>
                    <div class="row">
                      <section class="col-md-8 offset-left">
                        <h4 class="field-title">Email Address</h4>
                        <label class="input">
                          <input
                            type="email"
                            name="ShareEmail"
                            id="ShareEmail"
                            placeholder="Email Address"
                          />
                        </label>
                      </section>
                      <section class="col-md-8 offset-left">
                        <h4 class="field-title">Message</h4>
                        <label class="input">
                          <input
                            type="text"
                            name="message"
                            id="Message"
                            placeholder="Write something..."
                            value="alkfjawlkejr;alwkeraflkajwer;lkawej;rakw"
                            style="padding-bottom: 120px; padding-top: 19px"
                          />
                        </label>
                      </section>

                    </div>
                  </fieldset>
                  </div>

Answer 1

要在输入字段中换行文本，您应该使用

<textarea>

元素而不是

<input type="text">

。文本输入不支持文本换行——它们是为单行输入而设计的。将您的

input

替换为

textarea

，如下所示：

<textarea
  name="message"
  id="Message"
  placeholder="Write something..."
>
</textarea>

这将允许文本换行。