<div><label for="none">inputmode="none"</label><input type="text" inputmode="none" id="none"></div>
<div><label for="decimal">inputmode="decimal"</label><input type="text" inputmode="decimal" id="decimal"></div>
<div><label for="email">inputmode="email"</label><input type="text" inputmode="email" id="email"></div>
<div><label for="numeric">inputmode="numeric"</label><input type="text" inputmode="numeric" id="numeric"></div>
<div><label for="search">inputmode="search"</label><input type="text" inputmode="search" id="search"></div>
<div><label for="tel">inputmode="tel"</label><input type="text" inputmode="tel" id="tel"></div>
<div><label for="url">inputmode="url"</label><input type="text" inputmode="url" id="url"></div>
<div><label for="verbatim">inputmode="verbatim"</label><input type="text" inputmode="verbatim" id="verbatim"></div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  place-items: center;
}

label {
  color: #ff69b4;
  display: block;
  margin-bottom: 5px;
}

input {
    display: block;
    width: 100%;
    height: 30px;
    padding: .3rem .7rem .3rem .3rem;
    color: #555;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: .2rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.