Is there a way to add default text to a number input field that already has a value?

Question

Is there a way to add default text to a number input field that already has a value?

My current HTML input code is as follows:

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

The value of this input field is being populated from a cookie or storage that was set on a previous screen where the user provided a party size.

However, from a user experience standpoint, it's not immediately clear what "33" represents on this screen. Since I am dynamically populating the input, using placeholder text isn't an option. This has led me to explore ways in which I can somehow inject the word "People" after the numerical value.

I do prefer the clean look of the UI without visible form labels, so I would like to avoid adding them if possible.

This is the current state of affairs: https://i.sstatic.net/rKP0F.png

And this is the desired effect (highlighted in red): https://i.sstatic.net/J17OX.jpg

It may be simply achieved through a background image, but I want to ensure the spacing remains neat and precise. Any suggestions or advice would be greatly appreciated! Thank you!

html css input

Answer 1

Answer №1

Here is a suggestion that might set you on the right path:

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;
    }
}

Answer 2

Here is a suggestion that might set you on the right path:

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;
    }
}

Is there a way to add default text to a number input field that already has a value?

Answer №1

Similar questions

`The value of an element within an array changes automatically`

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Arranging divs precisely while rotating a Bootstrap Thumbnail

Container slide-show fill error

Ajax facilitates the loading of multiple containers

Breaking HTML attribute values into separate lines will make the code more organized and easier

Creating a wide-ranging megamenu with CSS only

What is the most efficient way to implement hiding/showing elements, adding/removing classes, and optimizing code in jQuery?

Display hidden text upon clicking using React Material UI Typography

Exploring Data in ASP.NET Resource Files

What is the best way to transfer Javascript variables from an HTML template to a view function in Django?

What could be the reason for the d-flex class in bootstraps preventing my div from expanding to 100% width?

Using multiple foreach loops within each other

How can I create a clickable <div> element containing multiple links and trigger only one action?

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Harvest information from various files

CSS Tutorial: Creating a Dynamic Gradient Bar

What is the best way to add a value to the value attribute of a div using JavaScript?

How should attributes be passed to the li element properly?

What is the best method for implementing a "night mode" feature using CSS?