0

I have an html input that looks like this:

<input type="number" min="4" max="100" step="1" name="myInput" value="33">

I am populating the value from a cookie/storage that is getting set from a previous screen. The previous screen is asking for a party size.

From a UX perspective, it i not clear what 33 means in this screen. Since I am populating the input, I cannot use placeholder text. This is why I am wondering if there is a way to inject "People" after the value somehow.

I really like how clean the UI looks without visible form labels, so if possible, I'd like to stay away from adding them.

Here is what I have now: enter image description here

This is what I am trying to accomplish (the red text): enter image description here

Perhaps it is as "simple" as a background image, but I'd like to keep the spacing nice and sharp. Thank you for any suggestions!

Damon
  • 4,151
  • 13
  • 52
  • 108
  • There's a `placeholder` option, not sure about browser support. `` – Bman70 Jun 04 '19 at 18:21
  • 1
    @Bman70 which is NOT visible when the field is not empty which is OPs problem – mplungjan Jun 04 '19 at 18:27
  • You can add a span tag next to the input and style it appropriately with CSS. – Nick Gatzouli Jun 04 '19 at 18:28
  • 1
    I enjoy asking questions here like this one to be told things like that. Much appreciated for not disappointing me. If this question is a duplicate, could you please post a link to the original so other people like me could find it? That seems like it would be more helpful. – Damon Jun 04 '19 at 20:39

1 Answers1

2

Try something like this, perhaps this will help you point you in the right direction:

HTML:

<label data-placeholder="people">
  <input type="number" min="4" max="100" step="1" name="myInput" value="33">
</label>

SCSS:

LABEL {
    position: relative;

    &:after {
        content: attr(data-placeholder);
        position: absolute;
        color: red;
        z-index: 1;
        top: 1em;
        right: 1em;
    }

    INPUT {
        width: 200px;
        box-sizing: border-box;
        padding-right: 5em;
    }
}
kunambi
  • 756
  • 1
  • 10
  • 25