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

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

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)
for the outer 1px of that border. Applying `-webkit-appearance: textfield`
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
when it has padding (and `textfield` appearance).
showing past searches).
## Contributing

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 {
-webkit-appearance: none;
}

4
test.html vendored
View File

@ -433,10 +433,6 @@
<div class="Test-run">
<input type="search" style="border:1px solid #ADD8E6; padding:10px; width:200px;">
</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>
<div class="Test-run">
<input type="text" placeholder="Text goes here" style="background-color: black; color: orange;">