Question 283465 in CSS Question posted in
Some basic documentation can be found here.

Css – 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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
    <section class="col-md-8 offset-left">
  <h4 class="field-title">Message</h4>
  <label class="input">
    <textarea
      name="message"
      id="Message"
      placeholder="Write something..."
      class="p-4" <!-- If you are using Tailwind -->
    >
    </textarea> 
  </label>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search