library-mirrors/normalize.css
1
0
Fork 0
mirror of https://github.com/necolas/normalize.css.git synced 2024-12-25 15:14:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Don't remove search input cancel button in Chrome/Safari

Browse Source 
Fix #685
This commit is contained in:
Nicolas Gallagher 2018-02-08 15:48:41 -08:00
parent 9f4876b9be
commit f7c98c4c85
3 changed files with 2 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -84,8 +84,7 @@ Chrome and Safari on Windows you can't control `border` properly. It will apply
`border-width` but will only show a border color (which cannot be controlled) `border-width` but will only show a border color (which cannot be controlled)
for the outer 1px of that border. Applying `-webkit-appearance: textfield` for the outer 1px of that border. Applying `-webkit-appearance: textfield`
addresses these issues without removing the benefits of search inputs (e.g. addresses these issues without removing the benefits of search inputs (e.g.
showing past searches). Safari (but not Chrome) will clip the cancel button on showing past searches).
when it has padding (and `textfield` appearance).
## Contributing ## Contributing

3
normalize.css
View File

@ -285,10 +285,9 @@ textarea {
} }
/** /**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. * Remove the inner padding in Chrome and Safari on macOS.
*/ */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }

4
test.html vendored
View File

@ -433,10 +433,6 @@
<div class="Test-run"> <div class="Test-run">
<input type="search" style="border:1px solid #ADD8E6; padding:10px; width:200px;"> <input type="search" style="border:1px solid #ADD8E6; padding:10px; width:200px;">
</div> </div>
<h3 class="Test-it">should not have a cancel button in Safari or Chrome</h3>
<div class="Test-run">
<input type="search" value="search">
</div>
<h3 class="Test-it">should reference inherited color</h3> <h3 class="Test-it">should reference inherited color</h3>
<div class="Test-run"> <div class="Test-run">
<input type="text" placeholder="Text goes here" style="background-color: black; color: orange;"> <input type="text" placeholder="Text goes here" style="background-color: black; color: orange;">