Boost the figures in an HTML input without affecting the letters

Question

Boost the figures in an HTML input without affecting the letters

Dealing with a challenge where I need an input field to accept both numbers and letters, but only allow the numbers to be increased or decreased while keeping the letters intact. Essentially, users should not be able to delete the letters. The desired functionality is illustrated in the image below:

Input field accepting numbers and letters only:
https://i.sstatic.net/1MMLJ.png

I managed to come up with a workaround by inserting <span>mm</span> next to numbers using position: absolute;.

Is there a more efficient or effective approach to achieving this?

html css input letter

Answer 1

Answer №1

Verify my answer below:

.input-num {position: relative;}
.input-num span { position: absolute; left: 18px;}

<div class="input-num">
  <input value="50" type="number" name="quantity" min="10" max="99">
  <span>mm</span>
</div>

Answer 2

Verify my answer below:

.input-num {position: relative;}
.input-num span { position: absolute; left: 18px;}

<div class="input-num">
  <input value="50" type="number" name="quantity" min="10" max="99">
  <span>mm</span>
</div>

Answer 3

Answer №2

One way to achieve this effect is by using the following CSS and HTML code:

div {
  display: inline-block;
  position: relative;
}

div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

.ms::after {
  content: 'mm';
}

<div class="ms">
  <input type="number" id="milliseconds" />
</div>

Answer 4

One way to achieve this effect is by using the following CSS and HTML code:

div {
  display: inline-block;
  position: relative;
}

div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

.ms::after {
  content: 'mm';
}

<div class="ms">
  <input type="number" id="milliseconds" />
</div>

Answer 5

Answer №3

If you want to adjust the width of the container, follow these steps:

Here is an example in HTML :

<div class="input__container">
  <input type="number" class="input" />
  <span class="input__text">mm</span>
</div>

And here is how you can style it in CSS :

.input__container{
  position:relative;
  width:60px;
}
.input{
  position:absolute;
  width:100%;
}
.input__text{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:10px;
}

You can view and test this code on Code pen : https://codepen.io/abdelhedi/pen/JjodrRq

Answer 6

If you want to adjust the width of the container, follow these steps:

Here is an example in HTML :

<div class="input__container">
  <input type="number" class="input" />
  <span class="input__text">mm</span>
</div>

And here is how you can style it in CSS :

.input__container{
  position:relative;
  width:60px;
}
.input{
  position:absolute;
  width:100%;
}
.input__text{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:10px;
}

You can view and test this code on Code pen : https://codepen.io/abdelhedi/pen/JjodrRq

Answer 7

Answer №4

Here is a different method: using text-align, padding, and a pseudo element from a generic structure that can be reused and updated.

Suggested layout:

* {
  padding: 0;
  margin: 0;
}


/* 101*/

[data-unit] {
  font-family: courier;  /* selecting a font for precise size and letter spacing */
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

[data-unit]::after {
  content: attr(data-unit);
  margin-left: -1.5em;  /* adjusted to fit font-family:courier; */
}

[data-unit] [type="number"] {
  font-size: 1.25rem;
  text-align: right;
  padding-right: 1.8em;  /* adjusted to fit font-family:courier; */
}


/* styling */

[data-unit] {
  box-sizing: border-box;
  display: flex;
  width: max-content;
  padding: 0.5em;
  background: lightblue;
  margin: 1em;
  border: outset;
  align-items: center;
}

[data-unit]::after {
  font-weight: bold;
}

Apply styles only to boxes with data-unit attributes.
<div data-unit="mm">
  <input type="number" value="0" />
</div>

<div data-unit="km">
  <input type="number" value="0" />
</div>

<div data-unit="cm">
  <input type="number" value="0" />
</div>
Leave other elements untouched
<div>
  <input type="number" value="0" />
</div>

Answer 8

Here is a different method: using text-align, padding, and a pseudo element from a generic structure that can be reused and updated.

Suggested layout:

* {
  padding: 0;
  margin: 0;
}


/* 101*/

[data-unit] {
  font-family: courier;  /* selecting a font for precise size and letter spacing */
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

[data-unit]::after {
  content: attr(data-unit);
  margin-left: -1.5em;  /* adjusted to fit font-family:courier; */
}

[data-unit] [type="number"] {
  font-size: 1.25rem;
  text-align: right;
  padding-right: 1.8em;  /* adjusted to fit font-family:courier; */
}


/* styling */

[data-unit] {
  box-sizing: border-box;
  display: flex;
  width: max-content;
  padding: 0.5em;
  background: lightblue;
  margin: 1em;
  border: outset;
  align-items: center;
}

[data-unit]::after {
  font-weight: bold;
}

Apply styles only to boxes with data-unit attributes.
<div data-unit="mm">
  <input type="number" value="0" />
</div>

<div data-unit="km">
  <input type="number" value="0" />
</div>

<div data-unit="cm">
  <input type="number" value="0" />
</div>
Leave other elements untouched
<div>
  <input type="number" value="0" />
</div>

Boost the figures in an HTML input without affecting the letters

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is the fixed header see-through?

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

Tips for transferring data when clicking in Angular 5 from the parent component to the child component

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

Ways to enable a user to edit a calculated property in VueJS?

Discover the art of concurrently listening to both an event and a timer in JavaScript

Submitting form by clicking a link on the page

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

Modifying the color of a placeholder in an HTML input using CSS

What is the best way to dynamically set an ID in Angular using the pound symbol (#)?

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

Link embedded in prism formatting, encased in code snippet

Organizing an array of objects within MUI cards based on social media platforms

Troubleshooting: Issues with jQuery's Class selector

Keep scrolling! There's no need to worry about reaching the end of the page and having to start over

Looking to create an anchor tag that navigates to a specific ID on the page while accommodating a fixed header placement

What is the best way to use jQuery to position a <div> at the bottom of another <div>?

Issue with plotted point labels failing to display correctly on X Range Chart for the initial date of each month - Highcharts

Calculate the combined total of two inputted values instantly

What methods can be used to disable the back button functionality within an iframe?