Inputmode

<div class="grid">
  <fieldset>
    <label for="none">none</label>
    <input type="text" id="none" inputmode="none"/>
  </fieldset>
  <fieldset>
    <label for="decimal">decimal</label>
    <input type="text" id="decimal" inputmode="decimal"/>
  </fieldset>
  <fieldset>
    <label for="numeric">numeric</label>
    <input type="text" id="numeric" inputmode="numeric"/>
  </fieldset>
  <fieldset>
    <label for="tel">tel</label>
    <input type="tel" id="tel" inputmode="tel"/>
  </fieldset>
  <fieldset>
    <label for="search">search</label>
    <input type="search" id="search" inputmode="search"/>
  </fieldset>
  <fieldset>
    <label for="url">url</label>
    <input type="url" id="url" inputmode="url"/>
  </fieldset>
</div>

<style>
  .grid {
    display: grid;
    max-width: 400px;
    gap: 1rem;
  }
  .grid div {
    display: flex;
    flex-direction: column;
    grid-template-columns: 100px 1fr;
    gap: .2rem;
  }
  fieldset {
    border: none;
    display: grid;
    gap: .4rem;
    padding: 1rem;
    border-radius: 1rem;
  }

  fieldset:focus-within label {
    font-weight: bold;
  }

  input {
    appearance: none;
    outline: none;
    padding: 0.5rem;
    border: 1px solid gainsboro;
    font-size: 1rem;
    border-radius: 0.5rem;
  }

  input:placeholder-shown {
    background-color: transparent;
  }

  input:user-invalid {
    border: 1px solid red;
  }

  input:focus-visible {
    background-color: rgba(255, 255, 255, .5);
    border: 2px solid cornflowerblue;
  }
</style>