Merge pull request #158 from dsgibbons/tel-input-patch

Add input[type="tel"] to format phone inputs

docs/index.html.ejs

@@ -414,6 +414,10 @@
           <label for="text${getNewId()}">Email</label>
           <input id="text${getCurrentId()}" type="email" value="admin@contoso.com"/>
         </div>
+        <div class="field-row-stacked" style="width: 200px">
+          <label for="text${getNewId()}">Phone</label>
+          <input id="text${getCurrentId()}" type="tel" value="636-555-3226"/>
+        </div>
         <div class="field-row-stacked" style="width: 200px">
           <label for="text${getNewId()}">Password</label>
           <input id="text${getCurrentId()}" type="password" value="hunter2"/>

style.css

@@ -445,6 +445,7 @@ input[type="checkbox"][disabled]:checked + label::after {
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="tel"],
 input[type="number"],
 select,
 textarea {
@@ -462,6 +463,7 @@ textarea {
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="tel"],
 select {
   height: 21px;
 }
@@ -473,16 +475,19 @@ input[type="number"] {
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="tel"],
 input[type="number"] {
   /* For some reason descenders are getting cut off without this */
   line-height: 2;
 }
 
 input[type="email"]:disabled,
+input[type="tel"]:disabled,
 input[type="password"]:disabled,
 input[type="text"]:disabled,
 input[type="number"]:disabled,
 input[type="email"]:read-only,
+input[type="tel"]:read-only,
 input[type="password"]:read-only,
 input[type="text"]:read-only,
 input[type="number"]:read-only,
@@ -506,6 +511,7 @@ select:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
+input[type="tel"]:focus,
 input[type="number"]:focus,
 textarea:focus {
   outline: none;