<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.