Mobile Ready Inputs

by Leandro Barbosa

HTML

<h3>Mobile Ready inputs, using pattern - argh</h3>

<label>Currency US, type="text" pattern="^\d+((\.|\,)\d{2})?$"</label>
<input type="text" pattern="^\d+((\.|\,)\d{2})?$" novalidate autocorrect="off" autocomplete="off" autofocus="true" required>

<label>Digits, type="number" pattern="[0-9]*"</label>
<input type="number" pattern="[0-9]*" novalidate autocorrect="off" autocomplete="off">

<label>Anything, type="text"</label>
<input type="text">

<label>Email, type="email"</label>
<input type="email" autocapitalize="off" autocorrect="off" autocomplete="on">

<label>Telephone, type="tel"</label>
<input type="tel" autocorrect="off" autocomplete="on">

<label>Full Name</label>
<input type="text" autocapitalize="words" autocorrect="off" autocomplete="on">

<label>Country</label>
<input type="text" autocapitalize="words" autocorrect="on" autocomplete="on">

<h3>HTML5 inputs</h3>

<label>Number, type="number"</label>
<input type="number">

<label>Color, type="color"</label>
<input type="color" value="#c60b20">

<label>Range, type="range"</label>
<input type="range" min="0" max="100" step="1" value="10">

<label>Time, type="time"</label>
<input type="time">

<label>Month, type="month"</label>
<input type="month">

<label>Week, type="week"</label>
<input type="week">

<label>Date, type="date"</label>
<input type="date">

<label>Datetime, type="datetime"</label>
<input type="datetime">

<label>Datetime-local, type="datetime-local"</label>
<input type="datetime-local">

SCSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

h3,
label,
input {
    font-size: 14px;
}

input {
    &:not([type=radio]),
    &:not([type=checkbox]) {
        background: white;
        border: 1px solid #CCC;
    }
}

label,
input {
    display: block;
    margin: 5px;
    padding: 5px 8px;
}

label {
    padding: 0;
}