How can I have 2 different font sizes and a line-break on a textarea placeholder?

Question

So I was asked to do what you see in the screenshot. It is new to me. It is a placeholder with a line-break and 2 different font sizes.

<div class="form-group pop-label">
  <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="Store or Location" required></textarea>
  <label for="inquiry-store-location">Store or Location</label>
</div>

That's how my code/HTML looks so far.

Any ideas?

This is a screenshot of the design:

Answer 1

It is not possible to alter the textarea to have two different text sizes. Closest you can get with placeholder is just two lines of text.

T get what you want, the basic idea is to move the label up and add padding to the textarea to move the placeholder down.

It is unclear what you want to happen when the user enters text into the textarea.

 textarea { height: 150px; width: 300px; padding-top: 50px; padding-left: 30px; }.pop-label { position: relative; }.pop-label label { position: absolute; top: 1em; left: .5em; font-size: 1.2em; color: #888; }

 <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="I like to eat cheese on crackers." required></textarea> <label for="inquiry-store-location">Store or Location</label> </div>

If you want the text to disappear when they add text

 .pop-label { position: relative; }.pop-label textarea { height: 150px; width: 300px; transition: all.5s ease; }.pop-label textarea:invalid { height: 100px; width: 270px; padding-top: 50px; padding-left: 30px; }.pop-label textarea + label { display: none; }.pop-label textarea:invalid + label { position: absolute; display: block; top: 1em; left: .5em; font-size: 1.2em; color: #888; }

 <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="I like to eat cheese on crackers." required></textarea> <label for="inquiry-store-location">Store or Location</label> </div>

Now you could use a trick like this, but you will not get full control over the text and size.

 textarea { height: 150px; width: 300px; }

 <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder=" &#10;&#10;I like to eat cheese on crackers." required></textarea> </div>

Answer 2

Here's what you need. I made it using javascript. But this is not a complete answer. I am currently trying to figure out how to change the font of an ordinary string variable.

 let ph_1 = 'Placeholder_1'; let ph_2 = ' \n\nPlaceholder_2'; let ph_full = ph_1 + ph_2; textarea_input = document.querySelector('#inquiry-store-location'); textarea_input.setAttribute('placeholder', ph_full);

 #inquiry-store-location { width: 100%; height: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group pop-label"> <textarea id="inquiry-store-location" class="form-control" name="store_location" placeholder="" required></textarea> </div>