How to add a text to the end of input and How to remove default up and down for input type number?

Question

I wanna build an input with fixed text | KG at the end, and remove the default ^ v input type of number:

That's what I want

That's what I've tried so far:

function isNumberKey(txt, evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 46) {
    if (txt.value.indexOf('.') === -1) {
        return true;
    } else {
        return false;
    }
  } else {
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
  }
  return true;
}

.field {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: white;
      font-size: 1.1rem;
      text-transform: uppercase;
      background-color: rgba(36, 141, 127, 0.4);
    }
    input {
      background-color: rgba(14, 78, 72, 0.6);
      border: 1px solid rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      padding: 9px;
      outline: none;
      color: wheat;
      font-size: 1.1rem;
      position: relative;
    }
    .kg::after {
      content: "| KG";
      position: absolute;
      right: 3px;
      top: 2px;
    }

<html>
  <body>
    <div class="field">
      <label for="gesier"> gesier</label>
      <input type="number" id="gesier" class="kg" onkeypress="return isNumberKey(this,event);" />
    </div>
  </body>
  <style></style>
</html>

There are non-standard properties to get rid of the spinner, but I found this alternative answer on a similar question compelling: https://stackoverflow.com/a/66759105/1863938 . tldr; there are accessibility issues with `type="number"` and you can use other attributes to restrict the input. — parktomatomi, Dec 20 '21 at 14:35
https://stackoverflow.com/questions/24369197/how-to-add-static-text-inside-an-input-form and https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_arrow_number — Tushar Shahi, Dec 20 '21 at 14:36

Maik Lowrey · Accepted Answer · 2021-12-20T15:03:16.187

You have to wrap the input and the text (KG) with a container. these container assign a position: relative;. The tag which holds the text KG assign position: absolute.

To hide the arrows in your input field you can use the css property: -moz-appearance: textfield;

input[type=number] {
  -moz-appearance: textfield;  
  -webkit-appearance: textfield;  
  appearance: textfield;  
}

working example

.field {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: white;
      font-size: 1.1rem;
      text-transform: uppercase;
      background-color: rgba(36, 141, 127, 0.4);
   
    }
.wrapper {
  position:relative;
}
span {
   position:absolute;
   top:10px;   
   right: 10px;
}
    input {
      background-color: rgba(14, 78, 72, 0.6);
      border: 1px solid rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      padding: 9px;
      outline: none;
      color: wheat;
      font-size: 1.1rem;
      position: relative;
    }

    .kg::after {
      content: "| KG";
      position: absolute;
      right: 3px;
      top: 2px;
    }

input[type=number] {
  -moz-appearance: textfield;  
}

<html>
  <body>
    <div class="field">      
      <label for="gesier"> gesier</label>
      <div class="wrapper">
      <input type="number" id="gesier" class="kg" />
      <span>kg</span>
      </div>
    </div>
  </body>
  <style></style>
</html>

How to add a text to the end of input and How to remove default up and down for input type number?

1 Answers1