cssformstypesfieldset

how to style the text inside a field of a form?

I am trying to target the actual text that is typed inside the "message" field. When you type a longer message, it does not wrap around instead continues on the same line (see screenshot below)

enter image description here

i tried to target it through CSS using [type="value"] and i even tried [type="text"} but i couldn't get it to work. Any ideas of what went wrong?

#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>

Solution

  • To wrap text in an input field, you should use a <textarea> element instead of <input type="text">. Text inputs do not support text wrapping — they are designed for single-line input. Replace your input with a textarea like so:

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

    This will allow the text to wrap.