davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

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

Browse Source 
Add input[type="tel"] to format phone inputs
This commit is contained in:
Juani Garay
2023-04-03 00:14:04 -03:00
committed by GitHub
parent 94688d0dd7 9b74f6a530
commit 4a2282dd91
2 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/index.html.ejs
View File

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

6
style.css
View File

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