errilaz/98se.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #182 from agustinl/chore-add-input-type-search

Browse source 
Add support for input type search
This commit is contained in:
Juani Garay 2023-10-20 11:48:47 -03:00 • committed by GitHub
commit 0e44208144
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/index.html.ejs
View file

@ -427,6 +427,10 @@
<label for="text${getNewId()}">Favorite Number</label> <label for="text${getNewId()}">Favorite Number</label>
<input id="text${getCurrentId()}" type="number" value="98"/> <input id="text${getCurrentId()}" type="number" value="98"/>
</div> </div>
<div class="field-row-stacked" style="width: 200px">
<label for="text${getNewId()}">Search</label>
<input id="text${getCurrentId()}" type="search" value="98 css"/>
</div>
`) %> `) %>
</div> </div>

16
style.css
View file

@ -448,6 +448,7 @@ input[type="password"],
input[type="email"], input[type="email"],
input[type="tel"], input[type="tel"],
input[type="number"], input[type="number"],
input[type="search"],
select, select,
textarea { textarea {
padding: 3px 4px; padding: 3px 4px;
@ -465,6 +466,7 @@ input[type="text"],
input[type="password"], input[type="password"],
input[type="email"], input[type="email"],
input[type="tel"], input[type="tel"],
input[type="search"],
select { select {
height: 21px; height: 21px;
} }
@ -472,12 +474,21 @@ input[type="number"] {
/* need this 1 pixel to fit the spinner controls in box */ /* need this 1 pixel to fit the spinner controls in box */
height: 22px; height: 22px;
} }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[type="email"], input[type="email"],
input[type="tel"], input[type="tel"],
input[type="number"] { input[type="number"],
input[type="search"] {
/* 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;
} }
@ -487,11 +498,13 @@ 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="search"]:disabled,
input[type="email"]:read-only, input[type="email"]:read-only,
input[type="tel"]: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,
input[type="search"]:read-only,
textarea:disabled { textarea:disabled {
background-color: var(--surface); background-color: var(--surface);
} }
@ -514,6 +527,7 @@ input[type="password"]:focus,
input[type="email"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus { textarea:focus {
outline: none; outline: none;
} }