0

There is a CSS placeholder option that can be used to raise a label and have it hover above an input. A good example is here: Move label in placeholder CSS

Where I copied this code snippet and made the label longer.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
    <label>A long line of really descriptive label goes here - **note: if this, then that, otherwise enter something else below, failing that, do something else again. thank you.</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

The challenge is that when the label is really long, and wraps to the next line, the placeholder label covers the element below it.

Would there be a solution to 'padding-top' the input for the height of the label (but only if the label wraps to the next line?)

or alternatively, a solution where the bottom of the label could be relative to the input, instead of the top of the label?

user1709076
  • 2,310
  • 8
  • 34
  • 53

0 Answers0